Canvas (HTML5)
Canvas é um elemento da HTML5 destinado a delimitar uma área para renderização dinâmica de gráficos. Todo o trabalho de criação e animação é realizado através de linguagens de programação dinâmica (usualmente Javascript). [1]
O elemento foi originalmente introduzido pela Apple Inc. para o navegador Safari. As aplicações da Mozilla ganharam suporte ao canvas começando pelo Gecko 1.8 (Firefox 1.5). O Internet Explorer possui suporte ao elemento a partir da versão 9. Para adicionar suporte as versões anteriores desse navegador, basta incluir um script feito pela Google chamado Explorer Canvas. Navegadores baseados em Chromium, como Google Chrome e Opera, também suportam o canvas.[2]
Exemplo
O código a seguir cria um elemento Canvas em uma página HTML5:
<canvas id="exemplo" width="200" height="200"> Este texto é exibido caso o navegador não tenha suporte ao Canvas. </canvas>
Usando JavaScript, você pode desenhar no canvas:
var exemplo = document.getElementById( 'exemplo' ), contexto = exemplo.getContext( '2d' ); contexto.fillStyle = 'red'; contexto.fillRect( 30, 30, 50, 50 );
Esse código desenha um retângulo vermelho na tela.
Contextos
A especificação para a HTML5 prevê dois contextos de criação: o contexto bidimensional e o contexto tridimensional.
O contexto bidimensional destina-se à criação de imagens em duas dimensões x e y, segundo um sistema de eixos cartesianos, cuja origem é no canto superior esquerdo da área de criação, com as coordenadas x crescendo da esquerda para direita e y de cima para baixo.
O contexto tridimensional destina-se à criação de imagens em três dimensões com acréscimo do eixo z no sentido da profundidade. [3]
Suporte
- Internet Explorer 9+
- Mozilla Firefox 3.6+
- Safari 3.2+
- Google Chrome 10+
- Opera 10.6+[4]
Ver também
- HTML5
- HTML5 audio
- HTML5 video
- WebGL
- Adobe Flash
Referências
- ↑ W3C - Working Draft
- ↑ Mozilla Developer Network
- ↑ Silva, Maurício Samy, HTML5 - A linguagem de marcação que revolucionou a web, São Paulo, Novatec Editoria, 2011, ISBN 978-85-7522-261-4
- ↑ When can I use - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.