HTML5 Canvas
- Vorige pagina HTML Input formulier eigenschappen
- Volgende pagina HTML5 SVG
Het canvas-element wordt gebruikt om grafieken op de webpagina te tekenen.
Wat is Canvas?
Het canvas-element van HTML5 gebruikt JavaScript om afbeeldingen op de webpagina te tekenen.
Een canvas is een rechthoekige gebied, waarvan je elke pixel kunt controleren.
Canvas heeft verschillende tekenpaden, rechthoeken, cirkels, tekens en methoden om afbeeldingen toe te voegen.
Maak een Canvas-element aan
Voeg een canvas-element toe aan de HTML5-pagina.
Stel de id, breedte en hoogte van het element in:
<canvas id="myCanvas" width="200" height="100"></canvas>
Teken met behulp van JavaScript
Het canvas-element heeft zelf geen tekenmogelijkheden. Alle tekenwerk moet binnen JavaScript worden voltooid:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript gebruikt id om het canvas-element te vinden:
var c=document.getElementById("myCanvas");
Maak vervolgens de context-object aan:
var cxt=c.getContext("2d");
Het "getContext("2d")"-object is een ingebouwd HTML5-object dat verschillende methoden heeft voor het tekenen van paden, rechthoeken, cirkels, tekens en het toevoegen van afbeeldingen.
De volgende twee regels code tekent een rode rechthoek:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
De fillStyle-methode maakt het rood, de fillRect-methode definieert de vorm, positie en afmetingen.
Coördinaten begrijpen
De fillRect-methode heeft als parameters (0,0,150,75).
Dit betekent: teken een rechthoek van 150x75 op het canvas, beginnend aan de linkerkantbovenhoek (0,0).
Zoals weergegeven in de afbeelding, worden de X- en Y-coördinaten van het canvas gebruikt om tekeningen op het canvas te lokaliseren.
Voorbeeld: Hover de muis over het rechthoekig gebied om de coördinaten te zien
Meer Canvas Voorbeelden
Hieronder zijn meer voorbeelden van tekenen op het canvas-element:
Voorbeeld - Lijn
Teken een lijn door aan te geven waar het begint en waar het eindigt:
JavaScript code:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Canvas element:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Uw browser ondersteunt het canvas element niet. </canvas>
Voorbeeld - Cirkel
Teken een cirkel door de afmetingen, kleur en positie te bepalen:
JavaScript code:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Canvas element:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Uw browser ondersteunt het canvas element niet. </canvas>
Voorbeeld - Verloop
Gebruik de door u gespecificeerde kleur om een verloopachtergrond te tekenen:
JavaScript code:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Canvas element:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Uw browser ondersteunt het canvas element niet. </canvas>
Voorbeeld - Afbeelding
Plaats een afbeelding op het canvas:
JavaScript code:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Canvas element:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Uw browser ondersteunt de HTML5 canvas tag niet. </canvas>
HTML Canvas handleiding
Bezoek onze site voor meer informatie over het schilderij: HTML Canvas handleiding.
- Vorige pagina HTML Input formulier eigenschappen
- Volgende pagina HTML5 SVG
