HTML Canvas -zelfstudie

Het HTML <canvas>-element wordt gebruikt om afbeeldingen op een webpagina te tekenen.

De afbeelding hierboven is gemaakt met <canvas>.

Het toont vier elementen: een rode rechthoek, een gradiëntrechthoek, een veelkleurige rechthoek en een veelkleurige tekst.

Wat is HTML Canvas?

Het HTML <canvas>-element wordt gebruikt om afbeeldingen te tekenen, on-the-fly, via scripting (meestal JavaScript).

Het <canvas>-element is alleen een container voor afbeeldingen. U moet een script gebruiken om de afbeeldingen daadwerkelijk te tekenen.

Canvas heeft verschillende methoden om paden, vakken, cirkels, tekst te tekenen en afbeeldingen toe te voegen.

Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die het <canvas>-element volledig ondersteunt.

HTML-canvas kan tekst tekenen

Canvas kan kleurrijke tekst tekenen, met of zonder animatie.

HTML Canvas kan afbeeldingen tekenen

Canvas heeft geweldige functies voor grafische gegevenspresentatie met afbeeldingen van grafieken en diagrammen.

HTML-canvas kan worden geanimeerd

Canvasobjecten kunnen bewegen. Alles is mogelijk: van simpele stuiterballen tot complexe animaties.

HTML-canvas kan interactief zijn

Canvas kan reageren op JavaScript-gebeurtenissen.

Canvas kan reageren op elke actie van de gebruiker (toetsklikken, muisklikken, knopklikken, vingerbewegingen).

HTML-canvas kan in games worden gebruikt

De methoden van Canvas voor animaties bieden veel mogelijkheden voor HTML-gamingtoepassingen.

Canvasvoorbeeld

In HTML ziet een <canvas>-element er als volgt uit:

Het <canvas>-element moet een id-attribuut hebben, zodat JavaScript ernaar kan verwijzen.

De attributen width en height zijn nodig om de grootte van het canvas te definiëren.

Tip: U kunt meerdere <canvas>-elementen op één HTML-pagina hebben.

Gebruik een stijlkenmerk om een ​​rand toe te voegen:

De volgende hoofdstukken laten zien hoe u op het canvas tekent.