Um pouco mais sobre o canvas
O Canvas
No post anterior vimos como escrever no canvas. Agora vamos aprender um pouco mais sobre ele.
Propósito
O canvas foi adicionado ao HTML para suportar desenhos em páginas web. Além de textos, é possível desenhar linhas, retângulos, círculos. É possível determinar cor ou cores para o desenho e, finalmente, criar animações, que é a base da criação de jogos.O código-base
Usaremos o código-base definido no post anterior.<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Meu primeiro canvas</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<canvas id="output" width="200" height="200">
Seu navegador não suporta o elemento canvas
</canvas>
<script>
</script>
</body>
</html>
Todos os códigos a seguir serão escritos em javascript, portanto, escritos entre as tags <script></script>
Desenhando uma linha simples
Linhas são desenhadas determinando o ponto inicial e o ponto final. O método .stroke() traça a linha no canvas entre os pontos definidos anteriormente.
/* Determino o canvas que receberá o desenho */
var canvas = document.getElementById('output').getContext('2d');
/* Movo o ponto inicial para a posição 0, 0 do canvas */
canvas.moveTo(0, 0);
/* Demarco o ponto final da linha */
canvas.lineTo(200, 100);
/* Desenho a linha */
canvas.stroke();
Várias linhas simples
Você pode desenhar várias linhas. O código a seguir desenha um triângulo:
/* Determino o canvas que receberá o desenho */
var canvas = document.getElementById('output').getContext('2d');
/* Movo o ponto inicial para a posição 100, 20 do canvas */
canvas.moveTo(100, 20);
/* Determino uma linha do topo até a base do triângulo */
canvas.lineTo(180, 180);
/* Agora, a linha da base */
canvas.lineTo(20, 180);
/* Por fim, volto ao topo, terminando o triângulo */
canvas.lineTo(100, 20);
/* Desenho a linha */
canvas.stroke();
Que tal um círculo?
Podemos desenhar um círculo também, mas, diferente de linhas, círculos são desenhados considerando mais referências. Vamos ao código:
/* Determino o canvas que receberá o desenho */
var canvas = document.getElementById('output').getContext('2d');
/* Antes de desenhar o círculo, precisamos iniciar o path */
canvas.beginPath();
/* Para desenhar um círculo, os seguintes atributos devem ser informados ao método .arc:
1º - O ponto X
2º - O ponto Y
3º - O raio
4º - O ângulo do início do círculo
5º - O ângulo do final do círculo */
canvas.arc(100, 100, 30, 0, Math.PI * 2);
/* Agora desenhamos o círculo */
canvas.stroke();
Math é uma biblioteca Javascript que fornece métodos e propriedades matemáticas. Math tem a propriedade .PI, que nos retorna o número de PI. A circunferência a ser desenhada no canvas não é informada em graus, mas, por outro lado, PI representa metade de um círculo. Dessa maneira, Math.PI * 2 desenha um círculo. Tente alterar o valor do multiplicador e veja o que acontece.
Retângulos
Um retângulo pode ser desenhado sem que seja necessário escrever quatro linhas individualmente. Segue o código:
/* Determino o canvas que receberá o desenho */
var canvas = document.getElementById('output').getContext('2d');
/* Dessa vez, vamos trocar a cor do desenho */
/* Determina a cor vermelho escuro ao preenchimento do retângulo */
canvas.fillStyle = 'darkred';
/* Desenha o retângulo */
canvas.fillRect(10, 10, 80, 80);
Para desenhar um retângulo não é necessário definir um path (como feito no desenho do círculo);
Perceba que o método .fillRect() desenha um retângulo preenchido. Podemos trocar isso para .strokeRect() e desenhar apenas o contorno do retângulo:
/* Determino o canvas que receberá o desenho */
var canvas = document.getElementById('output').getContext('2d');
/* Determina a cor azul ao contorno do retângulo */
canvas.strokeStyle = 'blue';
/* Desenha o retângulo */
canvas.strokeRect(10, 10, 80, 80);
Nesse post ficamos por aqui. Se ficou com dúvidas, comente!
Comentários
Postar um comentário