Neste tutorial introdutório, vamos aprender como começar a usar o canvas em JavaScript, aprendendo a desenhar um retângulo e mudar algumas propriedades, como cores e espessura da linha.
Introdução ao Canvas: elemento <canvas>
O canvas é uma forma de fazer desenhos e diversos tipos de atividades gráficas, fazendo uma mistura de HTML5 e JavaScript.
Sem mais delongas, vamos aprender como usar o canvas.
Ele funciona como um outro elemento qualquer do HTML, para delimitar uma região onde iremos desenhar e atuar graficamente, delimite pelas tags:
<canvas>
O Canvas não está ativado em seu Browser
</canvas>
A primeira coisa que fazemos é digitar um texto ali. Esse texto vai ser exibido caso não seja possível renderizar nada do Canvas, ou seja, se o Canvas não funcionar no seu navegador, vai aparecer essa mensagem de texto.
Mas só as tags não servem de nada, vamos adicionar alguns atributos:
- id = para fazer a identificação do elemento
- width = largura do canvas
- height = altura do canvas
Vamos experimentar um canvas de tamanho 300 x 200 (300 pixels de largura por 200 pixels de altura):
<canvas id = "meuRetangulo" width = "300" height = "200"
style = "border: 1px solid black;">
O Canvas não está ativado em seu Browser
</canvas>
Note que adicionamos um estilo, uma borda de 1px de espessura, sólida e preta, para você poder visualizar a área do canvas. Assim como uma <img>, o <canvas> também pode ser estilizado em relação a borda, espessura, cor, fundo etc. De fato, ele é bem parecido com o elemento <img>, como você vai notar no decorrer do tutorial.
Insira o código acima após a tag <body> do seu documento HTML e veja a mágica acontecer, vai aparecer uma tela, uma lona (canvas em inglês), é nessa região onde vamos trabalhar graficamente!
Sistema de Coordenada do Canvas
Antes de entrarmos em mais detalhes sobre o uso do canvas, precisamos entender seu sistema de coordenadas, que não é igual o nosso.
O dele é assim:
Ou seja, ao contrário do nosso, ele começa no canto superior esquerda.
O eixo Y cresce de cima pra baixo (no nosso sistema cartesiano, é de baixo pra cima).
O eixo X é igual, cresce da esquerda pra direita.
Assim, um ponto (x,y) está na posição X (da esquerda pra direita) do eixo horizontal e na posição Y no eixo vertical (de cima pra baixo). Ao longo dos tutoriais, usaremos essa lógica.
Renderizando e Definindo o Contexto no Canvas: getContext()
O nosso código criou o 'canvas', é como se fosse um painel, onde iremos desenhar.
Obviamente, ele ainda está em branco, só tem seu esboço com sua borda.
Para começarmos a renderizar algum gráfico no nosso canvas, vamos usar uma linguagem de script, no caso, a melhor de todas: JavaScript. Mas antes, vamos criar um nó entre nosso canvas e uma variável de nome canvas:
var canvas = document.getElementById("meuRetangulo");
Prontinho. O próximo passo é usar um método especial, chamado getContext() do Canvas. Com ele, vamos definir o contexto de nosso uso do canvas, ou seja, para que e como queremos usar a região.
No nosso caso, queremos fazer gráficos de duas dimensões, 2D, então vamos passar como argumento '2d'. Vamos definir nossa variável de contexto:
var context = canvas.getContext("2d");
Esse é apenas um dos contextos possíveis para se trabalhar com Canvas, neste tutorial vamos usar apenas o 2D mesmo.
Agora nossa variável context vai ter acesso a diversos atributos e métodos, como o que desenha um retângulo.
Desenhando um Retângulo: fillRect()
Ok, finalmente vamos lá, desenhar nosso bendito retângulo.
Para isso, vamos usar um método do canvas, o fillRect(), que recebe 4 argumentos: os dois primeiros são as coordenadas do ponto inicial (mais próximo da origem) e os dois últimos são largura (eixo x) e altura (eixo y).
Por exemplo, se o ponto mais próximo do retângulo à origem é: (10, 20)
E queremos 270px de largura e 150 de altura, os outros argumento são: (270,150)
Nosso método que desenha o retângulo, é:
context.fillRect(10, 20, 270, 150);
Resultado:
Pintando um retângulo: fillStyle
Note que o retângulo, por padrão, é pintado de preto.
Para preencher ele de outra cor, azul por exemplo, basta usarmos o atributo fillStyle com a cor que desejamos, ANTES, de desenharmos o retângulo com o fillRect.
Veja como fica nosso código JS pra desenhar e pintar um retângulo de azul:
context.fillStyle = "blue";
context.fillRect(10, 20, 270, 150);
Cor e Espessura da borda: strokeStyle e lineWidth
O canvas, aliado ao JS, é tão poderoso, que podemos personalizar muita coisa, incluindo a cor da linha do retângulo, bem como sua espessura.
Vamos desenhar uma nova borda, por cima do nosso quadrado.
Definimos a cor da borda com o atributo strokeStyle, vamos pintar de vermelha.
Definimos a espessura através do atributo lineWidth, vamos usar o valor 3.
Veja o código HTML completo com JS de nosso retângulo azul, de borda vermelha e espessura 3:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>Apostila JavaScript Progressivo</title>
</head>
<body>
<canvas id = "meuRetangulo" width = "300" height = "200"
style = "border: 1px solid black;">
O Canvas não está ativado em seu Browser
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("meuRetangulo");
var context = canvas.getContext("2d")
//Desenhando o retângulo pintado de azul
context.fillStyle = "blue";
context.fillRect(10, 20, 270, 150);
//Desenhando uma borda vermelha
//de espessura 3
context.strokeStyle = "red";
context.lineWidth = 3;
context.strokeRect(10, 20, 270, 150);
</script>
</body>
</html>
Desenhando retângulos transparantes
O código abaixo desenha um quadrado azul, e começando no meio desse quadrado azul, desenhamos um quadrado vermelho, porém este último tem 50% de transparência (0.5), veja o código:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>Apostila JavaScript Progressivo</title>
</head>
<body>
<canvas id = "meuRetangulo" width = "300" height = "200"
style = "border: 1px solid black;">
O Canvas não está ativado em seu Browser
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("meuRetangulo");
var context = canvas.getContext("2d")
//Quadrado azul
context.fillStyle = "rgb(0,0,200)";
context.fillRect(50, 50, 50, 50);
//Quadrado vermelho com transparência
context.fillStyle = "rgb(200,0,0, 0.5)";
context.fillRect(75, 75, 50, 50);
</script>
</body>
</html>
Veja o resultado:
A única coisa diferente que fizemos foi definir as cores do atributo fillStyle, que usamos o sistema RGB de cores para definir as cores dos quadrados.
E no último quadrado, fornecermos um dado a mais: 0.5 (para representar 50% de transparência).
Para saber mais sobre o sistema de RGB de cores:
