Hoje estou dando continuidade ao post Veja como HTML 5 substitui o flash e ensinando mais sobre esse nova tag HTML5 chamada de canvas.
Porém este post é avançado e exige um conhecimento mais profundo sobre HTML e DOM (Document Object Model)
Usando o Básico
<canvas id="tutorial" width="150" height="150"></canvas>
A sintaxe desta propriedade é muito parecida com o img , porém a única diferença é de não ter valores src e alt. A propriedade tem apenas dois atributos – Width e Height. Quando não há atributos Width e Height, a tela será inicialmente 300 px de largura e 150 de altura.
O atributo id não é específico para a tag , ele é um atributo HTML padrão e pode ser aplicado a (quase) todos os elementos HTML (como classe , por exemplo). É sempre uma boa idéia fornecer um id para identificar nosso script.
Leia este post sobre id e class para entender melhor Curso de CSS – Classes e Id ( Aula 3)
Dicas de uso
Navegadores como o Internet Explorer e versões mais antigas do Firefox não dão suporte para a propriedade , então a solução é fornecer conteúdos que usam a tag e dentro da tag usar um conteudo alternativo.
Veja um exemplo para entender:
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>
O contexto de renderização
Cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usadas para criar e manipular o conteúdo apresentado. Darei ênfase no contexto de renderização 2D, que é a única utilizada atualmente. No futuro, outros contextos pode fornecer diferentes tipos de processamento, por exemplo, é provável que num contexto em 3D baseado em OpenGL ES será adicionado aos navegadores.
Inicialmente é em branco, para aparecer algo é necessário acessar o contexto de renderização com um método chamado DOM getContext.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
Um modelo que vamos usar
Este modelo usaremos como ponto de partida e para exemplos mais tarde.
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Veja um exemplo
Este simples exemplo chama a interseção de dois retângulos, um dos quais tem a transparência alfa.
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
Vamos explorar como isso funciona em mais detalhes nos exemplos mais tarde.
Continue lendo o próximo post HTML5 – Desenhando retângulos com canvas