HTML5 -Leinwand - Grafikbeispielcode + Effektdiagramm zum Zeichnen von Bögen und Drehen

Kommentar: Bevor Sie den Rotationsvorgang durchführen, müssen Sie einen Satz verstehen: Die Rotation ist das Koordinatensystem der Leinwand und nicht die Figur selbst. Lassen Sie uns zunächst die Koordinaten des Kreises verstehen: die Mitte, den Startwinkel, den Endwinkel; Der nächste ist sehr einfach

Lassen Sie uns zunächst die Koordinaten des Kreises verstehen:

<script Language = "JavaScript">

var cxt = document.getElementById ('Demo'). getContext ("2d");

cxt.beginPath ();

CXT.ARC (100,100,50, Math.pi*0,75, Math.pi*1,75, False);/*Zeichnen Sie einen halbkreisförmigen Bogen mit der Zentrumkoordinate von 100.100; Der Startradian beträgt 0,75, der Endradian 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*/

cxt.fill ();/*Ein Schritt, um die Abbildung wirklich auf der Leinwand zu zeichnen, zeichnen Sie den ersten Halbkreis*/

/*Zeichnen Sie es vor, den zweiten Halbkreis zu zeichnen*/

cxt.beginPath ();

cxt.arc (170,100,50, math.pi*1,25, math.pi*0,25, false);

cxt.fillstyle = "#f00";

cxt.fill ();/*Zeichnen Sie die gezeichneten Grafiken auf der Leinwand*/

cxt.beginPath ();

/*Drehen Sie die Leinwand im Uhrzeigersinn um 45 Grad. Der Parameter der Drehfunktion ist Radians, daher müssen Sie sie um konvertieren */

cxt.rotate (45*math.pi/180);

CXT.FillRect (141,1, -50.100.100);/*Die Startkoordinate beträgt 141,1, -50 und die Breite und Höhe beträgt 100*////////////

cxt.fillstyle = "#f00";

cxt.fill ();

cxt.beginPath ();

/*Dreh die Leinwand in einen normalen Winkel*/

cxt.rotate (-45*math.pi/180);

cxt.font = "60px microsoft yahei";

cxt.strokestyle = "#f00";

cxt.stroketext ("Ich liebe HTML5", 0,300);/*Zwei Parameter, die erste besteht darin, die X-Achse-Koordinaten des Textes zu zeichnen, und die zweite ist mit dem Zeichnen der y-Koordinaten des Textes*/mit dem Zeichnen der Y-Koordinaten*/beginnen

cxt.stroke ();

/*Gradient erstellen*/

var grd = cxt.createlineargradient (0,45,175,50);/*Die vier Parameter sind der Gradientenstartpunkt x, y Gradientendpunkt x, y*/

grd.addcolorstop (0, "#ff0000");

grd.addcolorstop (0,25, "#ffff00");

grd.addcolorstop (0,5, "#00ff00");

grd.addcolorstop (0,75, "#00ffff");

grd.addcolorstop (1, "#ffff00");

cxt.strokestyle = grd;

cxt.stroketext ("Ich liebe Leinwand", 0.400);/*Zwei Parameter, die erste ist, die X-Achsenkoordinaten des Textes zu zeichnen, und die zweite ist, die y-Koordinate des Textes zu zeichnen*/

cxt.stroke ();

</script>

Reproduktionsbild: