HTML5-Leinwand – Zeichnen von Bögen und rotierenden Grafiken, Beispielcode-Renderings_HTML5-Tutorial-Fähigkeiten

Bevor Sie den Rotationsvorgang ausführen, müssen Sie einen Satz verstehen: Was gedreht wird, ist das Koordinatensystem der Leinwand und nicht die Grafik selbst. Nachdem Sie diesen Satz verstanden haben, ist der nächste Schritt sehr einfach. Lernen Sie zunächst die Koordinaten zum Zeichnen eines Kreises kennen:

Kopieren Sie den Code Der Code lautet wie folgt: var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath() , der letzte Bogenmaß ist 1,75, der letzte Parameter False = im Uhrzeigersinn, true = gegen den Uhrzeigersinn, dieser Parameter ist natürlich optional*/ cxt.fillStyle="#F00";/*Wählen Sie die zu verwendende Farbe aus*/ cxt.fill();/ *Der erste Schritt zum tatsächlichen Zeichnen der Grafiken auf der Leinwand besteht darin, den ersten Halbkreis zu zeichnen*/ /*Zeichnen Sie den zweiten Halbkreis auf die gleiche Weise*/ cxt.beginPath (); cxt.arc(170,100, 50,Math.PI*1.25,Math.PI*0.25,false); cxt.fill(); /*Zeichne die gezeichneten Grafiken auf der Leinwand*/ cxt.beginPath(); /*Drehe die Leinwand um 45 Grad im Uhrzeigersinn und muss daher konvertiert werden*/ cxt.rotate(45*Math.PI/180) ; cxt.fillRect(141.1,-50,100,100);/*Die Startkoordinaten sind 141.1,-50, Breite und Höhe sind 100*/ cxt .fillStyle="#F00"; cxt.fill (); cxt.beginPath(); /*Drehe die Leinwand in einen normalen Winkel*/ cxt.rotate(-45* Math.PI/180); cxt.font= "60px Microsoft Yahei"; cxt.StrokeStyle="#f00"; Zwei Parameter, der erste ist die x-Achsenkoordinate, um mit dem Zeichnen des Texts zu beginnen, der zweite ist die Y-Koordinate, um mit dem Zeichnen des Texts zu beginnen*/ cxt.Stroke();*Create Gradient*/ var grd=cxt.createLinearGradient(0,45,175,50); /*Die vier Parameter sind der Gradientenstartpunkt x, der y-Gradientenendpunkt x, y*/ grd.addColorStop(0,"#FF0000"); 🎜>grd.addColorStop(0.25,"#FFFF00"); grd.addColorStop(0.5,"#00FF00"); grd.addColorStop(0.75,"#00FFFF"); (1,"#FFFF00"); cxt .StrokeStyle=grd; cxt.StrokeText("I love Canvas",0,400);/*Zwei Parameter, der erste ist die x-Achsen-Koordinate, um mit dem Zeichnen zu beginnen Text, die zweite ist die Y-Koordinate, um mit dem Zeichnen von Text zu beginnen* / cxt.Stroke(); </script&gt

Rendering: