|
Primeiro vamos verificar se o navegador suporta o Canvas.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Criar canvas no HTML5</title>
</head>
<body>
<canvas id="meucanvas" width="200" height="100" style="border:1px solid
#000000;">
Este texto se mostra para os navegadores não compatíveis com canvas.
<br>
Por favor, utilize Firefox, Chrome, Safari ou Opera.
</canvas>
</body>
</html>
Para especificar as características deste canvas temos vários atributos:
Atributo id:
Para atribuir-lhe um nome único e logo nos referirmos a este canvas desde Javascript.
Atributos width e height:
Para indicar a largura e altura da área do canvas.
Outros atributos se podem colocar de maneira opcional, como por exemplo style, para indicar atributos de folhas de estilo para definir o aspecto da tela. Neste exemplo foi colocado como borda 1 pixel.
Agora vamos pintar nosso canvas.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Criar canvas no HTML5</title>
</head>
<body>
<canvas id="meucanvas" width="200" height="100" style="border:1px solid
#000000;">
Navegadore não compatível com canvas.
<br>
Por favor, utilize Firefox, Chrome, Safari ou Opera.
</canvas>
<script>
//Recebemos o elemento canvas
var canvas = document.getElementById('meucanvas');
//Acesso ao contexto de '2d' deste canvas, necessário para desenhar
var contexto = canvas.getContext('2d');
// Pintar a figura
contexto.fillStyle="red";
//Desenho no contexto do canvas
contexto.fillRect(50, 0, 70, 150);
</script>
</body>
</html>
Primeiro, com o método getElementById() obtenho o elemento da página que se passa como parâmetro, que é o canvas. Em seguida acessa contexto 2D do canvas, que é o que tem vários métodos que servem para desenhar na tela. Em seguida defenimos a cor que desejamos que seja pintado nosso canvas. Por último, posso executar o que desejo desenhar, neste exemplo defenimos cordenada primeiro as cordenadas (x e y) como (50, 0), depois a dimensão em largura e altura (70,150).
Resultado final:
Veja Mais:
- Elemento canvas em HTML5- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
0 comentários:
Postar um comentário