Introdução ao Canvas - Desenhando um Retângulo

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:
  1. id = para fazer a identificação do elemento
  2. width = largura do canvas
  3. 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:
Tutorial de Canvas

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:
Tutorial completo de canvas

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:
Tutorial de Canvas completo grátis

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:

Nenhum comentário:

Postar um comentário