Canvas, HTML5

O elemento canvas, que surgiu com o HTML5, permite criar dinamicamente gráficos em uma página web.

view sourceprint?

1.<canvas id="canvas" width="400" height="400"></canvas>

O elemento canvas pode ser estilizado como um elemento img (margin, border, background, etc).

Utilização do elemento canvas

view sourceprint?

1.var canvas = document.getElementById('canvas');

2.var ctx = canvas.getContext('2d');

3.// mudando a cor de preenchimento

4.ctx.fillStyle = "rgb(200,0,0)";

5.// adicionando um quadrado de 55x50px na posição left=10xtop=10 ao canvas

6.ctx.fillRect (10, 10, 150, 100);

Código fonte do exemplo de Canvas com Javascript

Nos próximos posts da série, abordarei dados mais aprofundados sobre: Desenhando formas, usando imagens, aplicando estilos e cores, transformações, composições e animações básicas.

Aproveitando, já vou divulgar um “Campo minado” que desenvolvi usando canvas.
Campo minado com canvas e HTML5