Canvas API

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

De Canvas API stelt JavaScript in staat om grafieken op het doek te tekenen.

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

Canvas toevoegen aan HTML

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

Voorbeeld

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

Probeer het zelf uit

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 tekenfunctionaliteit.

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 het 2D context-object kunt u op het canvas tekenen.

De onderstaande fillRect()-methode tekent een zwart rechthoekig gebied met de linkerbovenhoek op de positie 20,20. Het rechthoekige gebied 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 uit

Gebruik van kleur

De fillStyle-eigenschap stelt de vulkleur van het tekenobject in:

Voorbeeld

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

Probeer het zelf uit

U kunt ook een nieuwe <canvas>-element maken met de methode document.createElement() en dit element toevoegen aan een 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 uit

Pad

Een van de meest voorkomende methoden om op een 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 uit