Beispielcode für benutzerdefiniertes abgerundetes Rechteck und gepunktete Linien in HTML5 Canvas_HTML5-Tutorial-Fähigkeiten

Benutzerdefiniertes abgerundetes HTML5 Canvas-Rechteck und gestrichelte Linie (RoundedRectangle und Dash Line)

Implementiert eine Demonstration des Hinzufügens benutzerdefinierter Funktionen zum HTML Canvas 2D-Kontextzeichnungsobjekt, wie gestrichelte Linien gezeichnet und die Intervallgröße gestrichelter Linien gesteuert werden. und lernen Sie, Kreise zu zeichnen. Eck-Rechteck-Tipps.

Die im HTML5-Canvas-Zeichenobjekt bereitgestellten nativen Funktionen implementieren nicht die Funktionen zum Zeichnen abgerundeter Rechtecke und gepunkteter Linien, aber über den Object.prototype der JavaScript-Sprache können diese beiden Funktionen dem Objekt CanvasRenderingContext2D hinzugefügt werden . Der Code-Demonstrationseffekt ist wie folgt:

Der Code der Komponente fishcomponent.js lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

CanvasRenderingContext2D.prototype.roundRect =
function(x, y, width, height, radius, fill, Stroke) {
if (Typeof Stroke == „undefiniert“) {
Stroke = true; 🎜>this.beginPath();
this.moveTo(x radius, y);
this.lineTo(x width - radius, y);
this.quadraticCurveTo(x width, y, x width , y radius);
this.lineTo(x width, y height - radius);
this.lineTo( x-Radius, y-Höhe);
this.quadraticCurveTo(x, y height, x, y height - radius); , x Radius, y); fill();
}
};
CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
// Standardintervallabstand -> 5px
if (typeof pattern === " undefiniert") {
pattern = 5;
// berechne Delta x und Delta y
var dx = (toX - fromX); var dy = (toY - fromY) ;
var distance = Math.floor(Math.sqrt(dx*dx dy*dy));
var dashlineInteveral = (pattern <= 0) ? /pattern);
var deltay = (dy/distance) * pattern; 🎜>for(var dl=0 ; dlif(dl%2) {
this.lineTo(fromX dl*deltax, fromY dl*deltay);
this.moveTo(fromX dl*deltax, fromY dl*deltay); Demo in HTML:





Code kopieren


Der Code lautet wie folgt:


< !DOCTYPE html>
http-equiv="Content-type" content= "text/html;charset=UTF-8"> js">

• Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
• Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
• Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
• Reguläre Ausdrücke und neue HTML5-Elemente
• So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen