Kommentar: Die nativen Funktionen, die in HTML5 -Canvas -Zeichnungsobjekten bereitgestellt werden, erkennen die Funktion des Zeichnens abgerundeter Rechtecke und gepunkteten Linien nicht. Durch das Object.Prototyp von JavaScript können Sie diese beiden Funktionen zum Objekt -CanvasrenderingContext2D hinzufügen. Die spezifische Implementierung ist wie folgt. Interessierte Freunde können sich darauf beziehen.
HTML5 Canvas Custom abgerundetes Rechteck und Armaturenbrett (RoundedRectangle und Dash Line)Implementieren Sie eine Demonstration des Hinzufügens benutzerdefinierter Funktionsfunktionen zum HTML -Canvas 2D -Kontext -Zeichnungsobjekt, wie man gepunktete Linien zeichnet und die Größe der gepunkteten Linien steuert und die Fähigkeiten des Zeichnens abgerundeter Rechtecke lernt.
Die nativen Funktionen, die in HTML5 -Canvas -Zeichnungsobjekten bereitgestellt werden, erkennen nicht die Funktion des Zeichnens abgerundeter Rechtecke und gepunkteten Linien, aber das JavaScript -Sprachobjekt.Prototyp kann verwendet werden, um diese beiden Funktionen zum Objekt -CanvasrenderingContext2D hinzuzufügen. Der Code -Demonstrationseffekt lautet wie folgt:
Der Code der Komponenten fishComponent.js lautet wie folgt:
CanvasrenderingContext2d.prototype.RoundRect =
Funktion (x, y, Breite, Höhe, Radius, Füllung, Schlaganfall) {
if (typeof stroke == "undefined") {
Schlaganfall = wahr;
}
if (typeof radius === "undefined") {
Radius = 5;
}
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 + Höhe - Radius);
this.quadraticcurveto (x + Breite, Y + Höhe, x + Breite - Radius, Y + Höhe);
this.lineto (x + radius, y + Höhe);
this.quadraticcurveto (x, y + Höhe, x, y + Höhe - Radius);
this.lineto (x, y + radius);
this.quadraticcurveto (x, y, x + radius, y);
this.closepath ();
if (Schlaganfall) {
this.stroke ();
}
if (fill) {
this.Fill ();
}
};
CanvasrenderingContext2d.prototype.dashedlineto = function (fromx, fromy, tox, toy, muster) {
// Standardintervallabstand -> 5px
if (typeof muster === "undefined") {
Muster = 5;
}
// Berechnen Sie das Delta X und Delta Y.
var dx = (tox - fromx);
var dy = (toy - fromy);
var distance = math.floor (math.sqrt (dx*dx + dy*dy));
var DaslineInteveral = (Muster <= 0)? Entfernung: (Entfernung/Muster);
var deltay = (dy/distanz) * Muster;
var deltax = (dx/distanz) * Muster;
// Die Dash -Linie zeichnen
this.beginPath ();
für (var dl = 0; dl <DaslineInteveral; dl ++) {
if (dl%2) {
this.lineto (fromx + dl*deltax, fromy + dl*deltay);
} anders {
this.moveto (fromx + dl*deltax, fromy + dl*deltay);
}
}
this.stroke ();
};
Demonstration des Anrufs in HTML:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "x-ua-kompatible" content = "chrome = ie8">
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<title> Leinwand gerundete Rechteck -Demo </title>
<script src = "fishComponent.js"> </script>
<link href = "default.css" />
<Script>
var ctx = null; // Globale variable 2D -Kontext
var imagetexture = null;
window.onload = function () {
var canvas = document.getElementById ("text_canvas");
console.log (canvas.parentnode.clientwidth);
canvas.width = canvas.parentnode.clientwidth;
canvas.height = canvas.parentnode.clientHeight;
if (! canvas.getContext) {
console.log ("Canvas nicht unterstützt. Bitte installieren Sie einen HTML5 -kompatiblen Browser.");
zurückkehren;
}
var context = canvas.getContext ('2d');
context.strokestyle = "rot";
context.fillStyle = "RGBA (100.255.100, 0,5)";
Context.RoundRect (50, 50, 150, 150, 5, Richtig);
context.strokestyle = "blau";
für (var i = 0; i <10; i ++) {
var delta = i*20;
var muster = i*2+1;
context.dashedlineto (250, 50+Delta, 550, 50+Delta, Muster);
}
}
</script>
</head>
<body>
<h1> html5 canvas Dash -Line -Demo - von düsterer Fisch </h1>
<pre> Dash Linie und abgerundetes Rechteck </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>