HTML- doekkoördinate
Seilkoördinate
Die HTML-doek is 'n tweedimensionele rooster.
Die boonste linkerhoek van die doek het die koördinate (0,0)
In die vorige hoofstuk het jy gesien hoe hierdie metode gebruik word: fillRect(0,0,150,75).
Dit beteken: Begin by die boonste linkerhoek (0,0) en teken 'n 150x75 piksels reghoek.
Voorbeeld van koördinate
Beweeg oor die reghoek hieronder om sy x- en y-koördinate te sien:
Trek 'n lyn
Gebruik die volgende metodes om 'n reguit lyn op 'n doek te teken:
- moveTo( x,y ) - definieer die beginpunt van die lyn
- lineTo( x,y ) - definieer die eindpunt van die lyn
Om werklik die lyn te trek, moet jy een van die "ink"-metodes gebruik, soos stroke().
Voorbeeld
Definieer 'n beginpunt in posisie (0,0) en 'n eindpunt in posisie (200,100). Gebruik dan die stroke() metode om die lyn eintlik te trek:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Trek 'n sirkel
Gebruik die volgende metodes om 'n sirkel op 'n doek te teken:
- beginPath() - begin 'n pad
- arc(x,y,r,startangle, endangle) - skep 'n boog/kromme. Om 'n sirkel met arc() te skep: Stel beginhoek op 0 en eindhoek na 2*Math.PI. Die x- en y-parameters definieer die x- en y-koördinate van die middelpunt van die sirkel. Die r parameter definieer die radius van die sirkel.
Voorbeeld
Definieer 'n sirkel met die arc() metode. Gebruik dan die stroke() metode om die sirkel eintlik te teken:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();