files/nl/web/api/canvas_api/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

---
title: Canvas-handleiding
slug: Web/API/Canvas_API/Tutorial
translation_of: Web/API/Canvas_API/Tutorial
---
<div>{{CanvasSidebar}}</div>

<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>

<div class="summary">
<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> is een HTML element wat gebruikt kan worden om graphics te tekenen met behulp van een script (meestal JavaScript). Op deze manier is het mogelijk om bijvoorbeeld grafieken te tekenen, foto composities te maken, of simpele (en niet simpele) animaties te maken.  De afbeeldingen op deze pagina zijn voorbeelden can &lt;canvas&gt; implementaties die in deze tutorial zullen worden gemaakt.</p>
</div>

<p><span class="seoSummary">Deze tutorial beschrijft  hoe je met basis &lt;canvas&gt; 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.</span></p>

<p><code>&lt;canvas&gt;</code> werd voor het eerst geintroduceerd in Webkit van Apple voor OS X Dashboard. Sindsdien is het geimplementeerd in alle grote browsers.</p>

<h2 id="Before_you_start" name="Before_you_start">Om te beginnen</h2>

<p>Het <code>&lt;canvas&gt;</code> element gebruiken is niet heel ingewikkeld, maar het is wel nodig om de basis van <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> en <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a> te kennen. Er zijn enkele oudere browsers die het <code>&lt;canvas&gt; </code>element nog niet ondersteunen, maar het wordt wel ondersteund in alle recente versies van de grote browsers. Het standaard formaat van een canvas is 300 px x 150 px (breedte x hoogte). Het formaat kan worden aangepast met behulp van de HTML 'height' en 'width' eigenschappen. Om graphics te kunnen tekenen op het canvas gebruiken we een JavaScript context object.</p>

<h2 id="In_this_tutorial" name="In_this_tutorial">In deze tutorial</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Standaard gebruik</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Vormen tekenen</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Stylen en kleuren toepassen</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Tekst tekenen</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Afbeeldingen gebruiken</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformaties</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositie</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Simpele animaties</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Gevorderde animaties</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulatie</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Het canvas optimaliseren</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li>
</ul>

<h2 id="See_also" name="See_also">Bekijk ook</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas onderwerp pagina</a></li>
 <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator naar Canvas plug-in</a></li>
 <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
 <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 dagen aan canvas tutorials</a></li>
</ul>

<h2 id="Een_boodschap_aan_onze_bijdragers">Een boodschap aan onze bijdragers</h2>

<p>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.</p>

<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>