Hoje vou ensinar como desenhar formas simples como quadrados e retângulos com a tag HTML5
Porém este post é avançado e exige um conhecimento mais profundo sobre HTML e DOM (Document Object Model).
Grade
Para você ter noção maior é preciso ler o post anterior, partindo daquele exemplo da tela de 150 pixels de largura e 150 pixels de altura, é possível começar a desenhar formas.Para entender mais sobre grade separei alguns posts que poderão te auxiliar nessa dúvida:
Curso de CSS – Posicionamentos ( Aula 10)
The grid – (em inglês)
Entender a tela de canvas
Fonte developer.mozilla.org
A origem desta rede é posicionado no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a essa origem. Assim, a posição do canto superior esquerdo do quadrado azul torna-se x pixels da esquerda e Y pixels do topo (coordenada (x, y)).
Desenhado Retângulos
Primeiramente vamos olhar a sintaxe de três funções que desenha retângulos:
fillRect(x, y, largura, altura): Desenha um retângulo preenchido.
strokeRect(x, y, largura, altura): Desenha um contorno retangular.
clearRect(x, y, largura, altura): Limpa a área especificada e torna totalmente transparente.
Bem cada umas destas 3 funções tem os mesmos parâmetro x e y, os mesmos especificam a posição na tela(em relação à origem), os outros parâmetro largura e altura são bem óbvias.
Quem acompanha desde o post anterior HTML5 – Tutorial canvas vai perceber a função draw () sendo utilizada logo abaixo mais as três funções acima.
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
No próximo post veremos como desenhar círculos, triângulos e a mudar a cor de preenchimentos e mais para frente a fazer animações e até um joguinho com .
Este é o código completo:
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</script>
<style type="text/css">
body {
* margin: 20px;
* font-family: arial,verdana,helvetica;
* background: #fff;}
h1 {
* font-size: 140%;
* font-weight:normal;
* color: #036;
* border-bottom: 1px solid #ccc;
}
canvas {
* border: 2px solid #000;
* float: left;
* margin-right: 20px;
* margin-bottom: 20px; }
pre {
* float:left;
* display:block;
* background: rgb(238,238,238);
* border: 1px dashed #666;
* padding: 15px 20px; margin: 0 0 10px 0; }
</style>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">
Este texto se mostra para os navegadores não compatíveis com canvas.
Por favor, utiliza Firefox, Chrome, Safari ou Opera.
</canvas>
<pre>function drawShape(){
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</pre>
</body>