Kommentar: Es gibt zwei Formulare, einer ist Schlaganfall (Füllung) und der andere ist gefüllt (Schlaganfall). Der spezifische Implementierungscode ist wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Platzieren Sie zunächst ein Canvas -Element in die HTML -Seite, wobei das Canvas -Element drei Attribut -IDs, Breite und Höhe haben sollte.<Canvas> </canvas>
Holen Sie sich das Canvas -Objekt und erhalten Sie den Kontext var cxt = document.getElementById ('Demo'). GetContext (2d); wobei der Parameter 2D deterministisch ist.
Wenn Sie mit dem Zeichnen beginnen, gibt es zwei Formen, einer ist Schlaganfall und der andere einen Schlag.
JavaScript -Code:
<script Language = "JavaScript">
var cxt = document.getElementById ('Demo'). getContext ("2d");
cxt.beginPath ();
cxt.fillstyle = "#f00";/*set fill color*/
CXT.FillRect (0,0,200.100);/* Zeichnen Sie ein Rechteck, die ersten beiden Parameter bestimmen die Startposition, die letzten beiden sind die Breite und Höhe des Rechtecks*/
cxt.beginPath ();
cxt.strokestyle = "#000";/*Setzen Sie Rand*/
CXT.LineWidth = 3;/*Randbreite*//
CXT.Strokerect (0,120.200.100);
cxt.beginPath ();
cxt.moveto (0,350);
cxt.lineto (100.250);
Cxt.lineto (200.300);
CXT.CLOSEPATH ();/*Optionaler Schritt, schließen Sie den gezogenen Pfad*/
cxt.stroke ();
</script>
Reproduktionsbild: