Graphics met HTML5 en canvas

augustus 2011

potatoDie experimenteert.
canvas is een nieuwe tag in HTML5. Met javascript kan je er in tekenen. En daar heb ik wel zin in. Ik teken een lolly.

En vervolgens dezelfde lolly 16 keer, steeds op precies dezelfde manier: stokje naar beneden, en een bolletje eronder.

De figuur ontstaat door na iedere lolly het canvas te verplaatsen (ten opzichte van een onzichtbaar grid). Je kan het canvas ook vergroten en verkleinen, dus ook lollies van een ander formaat tekenen.

Door het schuiven van het canvas is het rekenwerk aanzienlijk minder dan wanneer je iedere lolly op zijn plek moet zetten.

Hier is de code voor het basiselement. Eigenlijk is het een kers, geen lolly, sorry.

function drawKirsch(ctx)
{
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,100); // Het stokje
    ctx.moveTo(20,120)
    ctx.arc(0,120,20,0,Math.PI*2,true); // Het bolletje
    ctx.stroke();
}

En dit is zo'n beetje de rest:

ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(300,200)

var n = 8;
for ( i = 0; i < n; i++ )
{
    ctx.rotate(Math.PI/4);
    ctx.save()
    drawKirsch(ctx);
    ctx.translate(0,50);
    ctx.rotate(Math.PI/4);
    ctx.scale(0.5, 0.5);
    drawKirsch(ctx);
    ctx.restore();
}

13/28