HTML DOM Canvas object

Het <canvas>-element definieert een bitmapgebied in een HTML-pagina.

De Canvas API staat JavaScript toe om grafieken op het canvas te tekenen.

De Canvas API kan vormen, lijnen, kurven, vakken, tekst en afbeeldingen tekenen, evenals kleuren, roteren, transparantie en andere pixeloperaties.

Voeg Canvas toe aan HTML

U kunt het <canvas>-tag gebruiken om een canvas-element toe te voegen aan elke locatie in een HTML-pagina:

Voorbeeld

<canvas id="myCanvas" width="300" height="150"></canvas>

Probeer het zelf

Hoe toegang te krijgen tot het Canvas-element

U kunt de HTML DOM-methode getElementById() gebruiken om toegang te krijgen tot het <canvas>-element:

const myCanvas = document.getElementById("myCanvas");

Om te tekenen op het canvas, moet u een 2D context object maken:

const ctx = myCanvas.getContext("2d");

Aantekening

Het HTML <canvas> element heeft zelf geen tekenfunctie.

U moet JavaScript gebruiken om enige vorm van grafiek te tekenen.

De getContext() methode retourneert een object met tekenhulpmiddelen (methoden).

Tekenen op het canvas

Na het maken van de 2D context object kunt u tekenen op het canvas.

De onderstaande fillRect() methode tekent een zwart rechthoekig vak, met de linkerbovenhoek op de positie 20,20. Het vak is 150 pixels breed en 100 pixels hoog:

Voorbeeld

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Probeer het zelf

Gebruik van kleur

De fillStyle-eigenschap stelt de kleur in van het tekenobject.

Voorbeeld

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Probeer het zelf

U kunt ook een nieuwe <canvas> element maken met de methode document.createElement() en dit element toevoegen aan de bestaande HTML-pagina:

Voorbeeld

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Probeer het zelf

Pad

Een van de meest voorkomende methoden om op het canvas te tekenen is:

1. Beginnen van een pad - beginPath()
2. Verplaatsen naar een punt - moveTo()
3. Tekenen in het pad - lineTo()
4. Tekenen van een pad - stroke()

Voorbeeld

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Probeer het zelf