Dominando Gráficos HTML Canvas

Introdução

A tag HTML <canvas> é utilizada para desenhar gráficos e outros elementos visuais numa página web. Esta tag fornece uma plataforma para os desenvolvedores criarem jogos, imagens e animações usando JavaScript. O elemento canvas vem com vários atributos que permitem manipular o tamanho, a opacidade e a aparência da canvas.

Neste laboratório, vamos explorar como usar a tag <canvas> em HTML para criar gráficos, adicionar animações e manipular formas e texto usando JavaScript.

Nota: Pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, pode atualizar o separador Web 8080 para visualizar a página web.

Criando uma Canvas Simples

Vamos criar uma canvas simples usando a tag <canvas> sem qualquer conteúdo. No ficheiro index.html, escreva o seguinte código:

<!doctype html>
<html>
  <head>
    <title>Simple Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

Guarde o ficheiro e abra-o no seu navegador. Irá notar uma área em branco na página, que é a nossa canvas com uma largura padrão de 300px e uma altura de 150px.

Adicionando Estilos à Canvas

Podemos adicionar estilos à nossa canvas usando o atributo style. Vamos adicionar uma borda à nossa canvas para tornar os seus limites visíveis.

<!doctype html>
<html>
  <head>
    <title>Styled Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

Guarde o ficheiro e atualize o seu navegador para ver o resultado.

Criando Formas na Canvas

Agora vamos adicionar alguns gráficos à nossa canvas. Para fazer isso, precisamos usar JavaScript. Podemos usar o método getContext() para obter um contexto de desenho 2D da nossa canvas e realizar várias operações nele.

<!doctype html>
<html>
  <head>
    <title>Shapes on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Draw a rectangle
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 50);
    </script>
  </body>
</html>

No código acima, primeiro obtemos o elemento canvas pelo seu ID myCanvas, e então obtemos um contexto de desenho 2D usando getContext(). Em seguida, definimos a propriedade fillStyle para "red" para preencher o retângulo com a cor vermelha. Finalmente, desenhamos o retângulo usando o método fillRect().

Guarde o ficheiro e atualize o seu navegador para ver o resultado.

Adicionando Texto à Canvas

Vamos adicionar algum texto à nossa canvas usando JavaScript.

<!doctype html>
<html>
  <head>
    <title>Text on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Add text
      ctx.font = "30px Arial";
      ctx.fillStyle = "blue";
      ctx.fillText("Hello World", 50, 100);
    </script>
  </body>
</html>

No código acima, primeiro obtemos o elemento canvas pelo seu ID myCanvas, e então obtemos um contexto de desenho 2D usando getContext(). Em seguida, definimos a propriedade font para "30px Arial" e a propriedade fillStyle para "blue". Finalmente, adicionamos o texto "Hello World" usando o método fillText().

Guarde o ficheiro e atualize o seu navegador para ver o resultado.

Animando Gráficos na Canvas

Também podemos criar animações na canvas usando JavaScript e a tag HTML <canvas>. Vamos criar uma animação de um retângulo em movimento na nossa canvas.

<!doctype html>
<html>
  <head>
    <title>Animated Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      let x = 20;
      let y = 20;
      const dx = 5;

      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillRect(x, y, 50, 50);

        if (x + 50 > canvas.width || x < 0) {
          dx = -dx;
        }

        x += dx;
      }

      animate();
    </script>
  </body>
</html>

No código acima, primeiro obtemos o elemento canvas pelo seu ID myCanvas, e então obtemos um contexto de desenho 2D usando getContext(). Em seguida, declaramos algumas variáveis x e y para armazenar a posição do nosso retângulo. Também declaramos a variável dx para mover o retângulo ao longo do eixo x.

Em seguida, criamos uma função animate() para desenhar o retângulo na tela. Usamos o método clearRect() para limpar os desenhos anteriores na canvas em cada frame. Em seguida, preenchemos o retângulo com a cor vermelha usando o método fillRect().

Depois, verificamos se o retângulo atingiu os limites da canvas e, caso isso aconteça, mudamos a direção do movimento alterando o valor de dx.

Finalmente, chamamos o método requestAnimationFrame() para criar um loop para a animação.

Guarde o ficheiro e atualize o seu navegador para ver o retângulo animado.

Resumo

Neste laboratório, aprendemos como usar a tag HTML <canvas> para criar gráficos e animações em uma página web. Também aprendemos como manipular o tamanho, a opacidade e a aparência da canvas usando atributos e estilos. Adicionamos formas, texto e animações na canvas usando JavaScript e o método getContext().

Desenho Gráfico HTML

Introdução

Criando uma Canvas Simples

Adicionando Estilos à Canvas

Criando Formas na Canvas

Adicionando Texto à Canvas

Animando Gráficos na Canvas

Resumo