HTML Canvas Coördinaten
- Vorige Pagina Canvas Tekenen
- Volgende Pagina Canvas Lijn
Canvas coördinaten
HTML canvas is een tweedimensionale raster.
De linkerbovenhoek van het canvas heeft de coördinaten (0,0).
In het vorige hoofdstuk hebben we de methode gebruikt: fillRect(0,0,150,75).
Dit betekent: begin met het tekenen van een 150x75 pixels rechthoek vanaf het linkerbovenhoek (0,0).
Coördinaatvoorbeeld
Houd de muis boven het onderstaande rechthoekje om de x- en y-coordinaten te zien:
Teken een lijn
Om een lijn te tekenen op het canvas, gebruik de volgende methoden:
- moveTo(x,y) - Definieer het startpunt van de lijn
- lineTo(x,y) - Definieer het eindpunt van de lijn
Om een lijn daadwerkelijk te tekenen, moet u een van de "verf" methoden gebruiken, zoals stroke().
Voorbeeld
Definieer de startpunt op (0,0) en het eindpunt op (200,100). Vervolgens wordt de lijn daadwerkelijk getekend met de stroke() methode:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Teken een cirkel
Om een cirkel te tekenen op het canvas, gebruik de volgende methoden:
- beginPath() - Start een pad
- arc(x,y,r,startangle,endangle) - Maak een cirkelboog/kromme
Om een cirkel te maken met arc(): stel de starthoek in op 0, de eindhoek in op 2 * Math.PI. De x- en y-parameters definiëren de x- en y-coordinaten van het middelpunt van de cirkel. De r-parameter definieert de straal van de cirkel.
Voorbeeld
Met de arc() functie wordt een cirkel gedefinieerd. Vervolgens wordt de cirkel daadwerkelijk getekend met de stroke() methode:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Zie ook:
- Vorige Pagina Canvas Tekenen
- Volgende Pagina Canvas Lijn
