So zeichnen Sie einen Kreis mit Javascript

So zeichnen Sie einen Kreis mit Javascript: 1. Legen Sie die für arc erforderlichen Parameter fest. 2. Legen Sie startAngle und endAngle fest. 3. Legen Sie die Richtung fest, in der der Kreis gegen den Uhrzeigersinn gezeichnet wird.

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript-Version 1.8.5, DELL G3-Computer

Wie zeichne ich einen Kreis mit Javascript?

So verwenden Sie die Bogenfunktion von JavaScript, um einen Kreis auf einer Webseite zu zeichnen

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript-Version 1.8.5, DELL G3-Computer

1 Die erforderlichen Parametereinstellungen für arc

Der Code lautet wie folgt:

arc(x, y, radius, startAngle, endAngle, counterclockwise);

x, y, radius sind alle leicht zu verstehen, also konzentrieren wir uns auf die drei Parameter startAngle, endAngle und gegen den Uhrzeigersinn!

2. Detaillierte Erklärung des Bogenparameters

1. startAngle und endAngle beziehen sich auf den Startwinkel bzw. Endwinkel des Kreises. Im Handbuch heißt es, dass der Startwinkel 0 und der Endwinkel Math.PI*2 ist , was genau richtig ist. Zeichnen Sie einen Kreis Endwinkel auf 1, wie unten gezeigt

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

Ich habe den Startwinkel auf 1 und den Endwinkel auf 2 gesetzt, wie unten gezeigt

Von oben können wir sehen, dass der Endpunkt von Das erste Bild ist der Ausgangspunkt des zweiten Bildes. Das heißt, ein Kreis hat unzählige Winkel. Solange Sie den Startwinkel und den Endwinkel festlegen, kann er zwei Punkte in Form eines Bogens verbinden! Der Unterschied zwischen Startpunkt und Endpunkt ist die Länge der beiden Punkte im Diagramm! Wenn der Unterschied zwischen dem Startpunkt und dem Endpunkt darin bestehen kann, dass die beiden Punkte zusammenfallen, entsteht ein Kreis! Mit diesem Wissen können wir einen dynamischen Kreis erstellen

3. Gegen den Uhrzeigersinn bezieht sich auf gegen den Uhrzeigersinn (wahr) oder im Uhrzeigersinn (falsch)

Sie sehen, wenn ich den Startpunkt auf 0 und den Endpunkt auf 1 setze und im Uhrzeigersinn wähle

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

Wenn ich den Startpunkt auf 0 und den Endpunkt auf 1 setze und gegen den Uhrzeigersinn wähle

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

Empfohlenes Lernen: „

Javascript-Grundlagen-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie einen Kreis mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!