|
contexto.fillRect(0, 0, 100, 100);
Representado na figura em verde o (0, 0) significa o posição relacionada ao (X e Y).
Em seguida colocamos a dimensão em relação a largura e altura do canvas, aqui está dimensionado com (100, 100).
Em conclusão temos (0, 0, 100, 100), exemplo prático.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Criar canvas no HTML5</title>
</head>
<body>
<canvas id="meucanvas" width="100" 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="#9FB6CD";
//Desenho no contexto do canvas
contexto.fillRect(0, 0, 100, 100);
</script>
</body>
</html>
Veja Mais:
- Coordenadas do Canvas no HTML5- 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