Canvas tutorial

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

<canvas> is een HTML element wat gebruikt can worden om graphics te tekenen met behulp van een script (meestal JavaScript). Op deze manier is het mogelijk om bijvoorbeel grafieken te tekenen, foto composities te maken, of simpele (en niet simpele) animaties te maken.  De afbeeldingen op deze pagina zijn voorbeelden can <canvas> implementaties die in deze tutorial zullen worden gemaakt.

Deze tutorial beschrijft  hoe je met basis <canvas> elementen 2D graphics kunt maken. De voorbeelden op deze pagina zouden je een goed idee moeten geven van wat er mogelijk is met canvas. Ook kan je de stukjes code gebruiken om zelf te beginnen met het bouwen van je eigen content.

<canvas> werd voor het eerst geintroduceerd in Webkit van Apple voor OS X Dashboard. Sindsdien is het geimplementeerd in alle grote browsers.

Om te beginnen

Het <canvas> element gebruiken is niet heel ingewikkeld, maar het is wel nodig om de basis van HTML en JavaScript te kennen. Er zijn enkele oudere browsers die het <canvas> element nog niet ondersteunen, maar het wordt wel ondersteunt in alle recente versies van de grote browsers. Het standaard formaat van een canvas is 300 px x 150 px. (width x height). Maar aangepaste formaten kunnen worden gedefinieerd met behulp van het HTML height en width property. Om graphics te kunnen tekenen op het canvas gebruiken we een JavaScript context object.

In deze tutorial

Bekijk ook

Een boodschap aan onze bijdragers

Vanwege een ongelukkige technische fout in de week van 17 juni, 2013, zijn we de geschiedenis van deze tutorial verloren. Inclusief alle bijdrages uit het verleden. Wij verontschuldigen ons hiervoor en hopen dat jullie deze vervelende ongeval kunnen vergeven.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: SvG325
 Laatst bijgewerkt door: SvG325,