HTML Canvas -coördinaten
Canvas coördinaten
Het HTML-canvas is een tweedimensionaal raster.
De linkerbovenhoek van het canvas heeft de coördinaten (0,0)
In het vorige hoofdstuk zag je deze methode gebruikt: fillRect(0,0,150,75).
Dit betekent: Begin in de linkerbovenhoek (0,0) en teken een rechthoek van 150x75 pixels.
Coördinaten Voorbeeld
Beweeg de muis over de onderstaande rechthoek om de x- en y-coördinaten te zien:
Teken een lijn
Gebruik de volgende methoden om een rechte lijn op een canvas te tekenen:
- moveTo( x,y ) - definieert het startpunt van de lijn
- lineTo( x,y ) - definieert het eindpunt van de lijn
Om de lijn daadwerkelijk te tekenen, moet je een van de "inkt"-methoden gebruiken, zoals stroke().
Voorbeeld
Definieer een startpunt in positie (0,0) en een eindpunt in positie (200.100). Gebruik vervolgens de methode stroke() om de lijn daadwerkelijk te tekenen:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Teken een cirkel
Gebruik de volgende methoden om een cirkel op een canvas te tekenen:
- beginPath() - begins a path
- arc(x,y,r,startangle,endangle) - maakt een boog/kromme. Een cirkel maken met arc(): Stel de beginhoek in op 0 en de eindhoek op 2*Math.PI. De x- en y-parameters definiëren de x- en y-coördinaten van het middelpunt van de cirkel. De parameter r definieert de straal van de cirkel.
Voorbeeld
Definieer een cirkel met de methode arc(). Gebruik vervolgens de methode stroke() om de cirkel daadwerkelijk te tekenen:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();