Desenvolvimento - HTML

Entendendo a tag Canvas no HTML 5

Veja neste artigo uma breve introdução sobre a tag Canvas do HTML 5, usado para desenhar gráficos na página web através de linguagem de script.

por Ricardo Arrigoni


Introdução:

Este artigo irá explicar a terminologia básica e como trabalhar com canvas usando HTML 5. O <canvas> é um elemento HTML que pode ser usado para desenhar gráficos na página web através de linguagem de script. Neste artigo vamos usar o Javascript como linguagem de script.

Descrição:

  • O elemento <canvas> é apenas um elemento para gráficos, devemos usar um script para realmente extrair os gráficos.
  • Basicamente, uma tela é uma região definida no código HTML com atributos de altura e largura.
  • Canvas usa vários métodos para desenhar formas personalizadas (círculo, semicírculo, Retângulo e Quadrado) caracteres, e adicionar imagens.
  • Primeiro de tudo vamos precisar para colocar a tag canvas em algum lugar dentro do nosso HTML, criar uma função JavaScript que acessa a tag canvas, uma vez que a página carrega e depois utilizar o HTML5 Canvas API para desenhar suas visualizações.
  • O IE9, Chrome, Mozilla Firefox, Opera e Safari suportam a tag <canvas>.

    • Criando Canvas

    A tela é iniciada com o elemento <canvas>. Ele contém o id, largura e altura do elemento <canvas>.

    Exemplo-<canvas id="UgCanvas" width="400" height="200"> </ canvas>

  • Canvas width: Largura da região
  • Canvas height: Altura da região

Nota - O elemento <canvas> não tem capacidade de desenhar por si só, para isso sempre precisaremos usar um efeito JavaScript.

Desenhando formas

Aqui, nós precisamos entender sobre o espaço de coordenadas da tela. Geralmente uma unidade no espaço corresponde a um pixel na tela. A origem deste espaço é posicionada no centro (coordenada (0,0)). Todos os elementos são colocados em relação a essa origem.

Desenho Retângulo

Temos que usar o método rect(). Um retângulo HTML5 Canvas é posicionado por parâmetros x e y, e é dimensionado com parâmetros de largura e altura. Exemplo:

Listagem 1: Exemplo de rect()

<script>
context.rect(x, y, width, height);
</script>

Listagem 2: Script para criar Retângulo usando HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c6c6c6;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#7F7F00";
ctx.fillRect(0,0,150,100);
</script>
</body>
</html>
 

Figura 1: Criação do retângulo

Caso a gente queira criar um arco, podemos usar o arc() e definir o ângulo inicial como 0 e o ângulo terminando como 2 * PI (22/7). Por exemplo:

Listagem 3: Exemplo de arc()

<script>
  context.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>

Listagem 4: Script para criação de círculo usando HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#7F7F00";
ctx.beginPath();
ctx.arc(90,50,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
 Criando círculo

Figura 2: Criando círculo.

Path (Line)

Para criar um Path usando Canvas, podemos usar os métodos BeginPath(), moveTo(), lineTo()e stroke(). A seguir vemos alguns exemplos:

Listagem 5: Exemplo de path

<script>
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();
</script>

Listagem 6: Script para criação de Path

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c6c6c6;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(50,160);
ctx.stroke();
</script>
</body>
</html>
 Exemplo de pathline usando Canvas

Figura 4: Exemplo de pathline usando Canvas

Trabalhando com textos

Iremos usar a propriedade font para trabalhar com textos no canvas. O estilo pode ser normal, tamanho da fonte em itálico, ou negrito. Por padrão o tamanho da fonte é normal. Exemplo:

Listagem 7: Exemplo de fonte

<script>
context.font = 'italic 40px Calibri';
</script>

Listagem 8: Script para criação de textos 

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("UgCanvas");
        var context = canvas.getContext("2d");

        context.font = "italic 40pt arial";
        context.fillText("Canvas Tutorial.", 10, 100);
      };
    </script>
  </head>
  <body>
    <canvas id="UgCanvas" width="400" height="200" style="border:1px solid #c6c6c6;"></canvas>
  </body>
</html>
 Trabalhando com textos no canvas

Figura 5: Trabalhando com textos no canvas

Conclusão

Neste artigo vimos alguns exemplos básicos sobre o Canvas em HTML 5. Com essa nova tag é possível fazer muito mais coisas, mas o intuito desse artigo foi dar uma breve introdução, espero que tenham gostado e até o próximo.
Ricardo Arrigoni

Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.