O HTML5 é o próximo grande passo da Web, que vai permitir criar uma experiência mais agradável de navegação, e a tag canvas é talvez a que mais contribuirá para esse efeito.
O elemento canvas permite criar uma área de desenho, na qual podemos desenhar desde simples figuras geométricas, até imagens complexas, como bitmaps.

Actualmente o elemento canvas do HTML 5.0 é suportado pelos seguintes browsers:

• Firefox 1.5 ou superior
• Google Chrome
• Safari 2.0
• Opera 9.5 ou superior

Para um suporte melhor é recomendada a utilização do browser mais recente, uma vez que o HTML5 ainda se encontra em fase de desenvolvimento e por isso o suporte para o canvas ainda não é completo.

Mas existe um problema…

E o Internet Explorer? Como o suporte para HTML 5 no Internet Explorer é praticamente inexistente, o elemento canvas ainda não é suportado, mas podemos usar o Google Chrome Frame, que é um plugin que permite usar o motor do Chrome, que suporta HTML 5.0 e canvas, no Internet Explorer. Pode verificar aqui como usar o Google Chrome Frame.

Criar um elemento canvas

O elemento canvas tem apenas 2 atributos, o width e o height, que correspondem ao comprimento e altura da área de desenho respectivamente.

Depois convém definir um id para o canvas, uma vez que vai ser necessário aceder ao elemento através de Javascript.

Exemplo:

1
<canvas id="areaDesenho" width="200" height="200"></canvas>

Também podemos definir uma mensagem ou uma imagem a exibir, no caso de o browser não suportar o elemento canvas, para isso basta introduzir o HTML que queremos que apareça quando não existe suporte.

Exemplo:

1
2
3
<canvas id="areaDesenho" width="200" height="200">

    O seu browser ainda não suporta HTML5 ou a tag Canvas!

</canvas>

Obter contexto de desenho do canvas: getContext

Antes de começar a desenhar no canvas temos de obter o contexto para desenho, neste caso vamos desenhar em 2D, por isso queremos obter o contexto de desenho em 2D.
Para obter um contexto usamos a função getContext do elemento canvas.

Exemplo:

1
2
var canvasElem = document.getElementById('areaDesenho');

var contexto = canvasElem.getContext('2d');

Páginas: 1 2 3