Leinwand-Koordinaten
Die HTML Leinwand ist ein zweidimensionales Gitter.
Die obere linke Ecke der Leinwand hat die Koordinaten (0,0)
Im vorigen Kapitel haben Sie gesehen , diese Methode verwendet: fillRect(0,0,150,75) .
Das bedeutet: Beginnen Sie an der oberen linken Ecke (0,0) und ein 150x75 Pixel Rechteck zu zeichnen.
Koordinaten Beispiel
Maus über das Rechteck unter seine x- und y-Koordinaten, um zu sehen:
Zeichne eine Linie
Um eine gerade Linie auf einer Leinwand zu zeichnen, verwenden Sie die folgenden Methoden:
- moveTo( x,y ) - definiert den Startpunkt der Linie
- lineTo( x,y ) - definiert den Endpunkt der Linie
Um tatsächlich die Grenze ziehen, müssen Sie eine der verwenden "ink" Methoden, wie stroke() .
Beispiel
Definieren Sie einen Startpunkt in der Position (0,0) , und einen Endpunkt in Position (200,100) . Dann nutzen Sie die stroke() Methode , um tatsächlich die Linie zu zeichnen:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Versuch es selber " Zeichnen Sie einen Kreis
Um einen Kreis auf einer Leinwand zu zeichnen, verwenden Sie die folgenden Methoden:
- beginPath() - beginnt ein Weg
- arc(x,y,r,startangle,endangle) - erzeugt einen Bogen / Kurve. Um einen Kreis mit erstellen arc() : Set Startwinkel auf 0 und Ende Winkel auf 2 * Math.PI. Die Parameter x und y definieren die x- und y-Koordinaten des Zentrums des Kreises. Der r-Parameter definiert den Radius des Kreises.
Beispiel
Definieren Sie einen Kreis mit dem arc() Methode. Dann nutzen Sie die stroke() Methode , um tatsächlich den Kreis zu zeichnen:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Versuch es selber "