Elementos Gráficos e Interativos no HTML5

O HTML5 trouxe elementos que permitem criar gráficos, desenhos vetoriais, animações e também incorporar outros conteúdos externos diretamente nas páginas. Esses elementos proporcionam interatividade, dinamismo e riqueza visual, sem a necessidade de plugins externos.

Canvas

O que é <canvas>

O elemento <canvas> permite desenhar gráficos, animações, jogos e outros elementos gráficos diretamente no navegador, utilizando JavaScript.

Estrutura Básica

htmlCopiarEditar<canvas id="meuCanvas" width="500" height="300">
  Seu navegador não suporta o elemento canvas.
</canvas>

O conteúdo entre <canvas> e </canvas> é exibido apenas se o navegador não suportar o recurso.

Exemplo de Desenho Simples

<canvas id="meuCanvas" width="400" height="200"></canvas>

<script>
  const canvas = document.getElementById('meuCanvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 200, 100);
</script>
  • Este código desenha um retângulo azul no canvas.

O que é possível fazer com <canvas>

  • Gráficos dinâmicos

  • Jogos 2D

  • Visualizações de dados

  • Animações

  • Efeitos visuais

SVG

O que é SVG

SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML. Diferente do <canvas>, que é uma área de pixels manipulada por JavaScript, o SVG representa elementos gráficos como objetos DOM, permitindo manipulação direta via CSS ou JavaScript.

Exemplo de SVG embutido

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red" />
</svg>
  • Este exemplo desenha um círculo vermelho.

Vantagens do SVG

  • Escalável sem perda de qualidade.

  • Manipulável via CSS e JavaScript.

  • Acessível e indexável (por ser XML).

  • Ideal para ícones, logotipos, gráficos e ilustrações.

Desvantagens

  • Desempenho inferior ao <canvas> em gráficos altamente dinâmicos e jogos.

Comparação: Canvas vs. SVG

Característica

Canvas

SVG

Modelo

Bitmap

Vetorial

Manipulação

JavaScript

CSS, JavaScript e DOM

Desempenho

Melhor em animações complexas

Melhor para gráficos estáticos ou pouco dinâmicos

Acessibilidade

Difícil

Boa, por ser baseado em XML

SEO

Não indexável

Indexável

Iframe

O que é <iframe>

O elemento <iframe> permite incorporar conteúdos externos dentro da sua página, como vídeos, mapas, documentos ou até outras páginas web.

Estrutura Básica

<iframe src="https://www.vitorzonho.com.br" width="600" height="400">
  Seu navegador não suporta iframes.
</iframe>

Exemplos Comuns de Uso

Incorporar um vídeo do YouTube

<iframe width="560" height="315"
src="https://www.youtube.com/embed/ID_DO_VIDEO"
frameborder="0"
allowfullscreen>
</iframe>

Incorporar um mapa do Google

<iframe src="https://www.google.com/maps/embed?pb=..."
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

Atributos Importantes do <iframe>

Atributo

Descrição

src

URL do conteúdo incorporado.

width e height

Define o tamanho do iframe.

frameborder

Define borda (0 para remover).

allowfullscreen

Permite modo de tela cheia (para vídeos).

loading="lazy"

Carregamento preguiçoso (otimiza performance).

sandbox

Restringe funcionalidades, aumentando a segurança.

Melhores Práticas para Elementos Gráficos e Interativos

  • Utilize <canvas> para gráficos dinâmicos, jogos, efeitos visuais ou animações complexas.

  • Prefira SVG para ilustrações, ícones, logotipos e gráficos estáticos, especialmente se precisar de alta definição e responsividade.

  • Use <iframe> apenas quando necessário, priorizando segurança com o atributo sandbox e otimizando desempenho com loading="lazy".

  • Sempre forneça conteúdo alternativo dentro de <canvas> e <iframe> para navegadores que não suportem os elementos.

Exemplo Prático Completo

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elementos Gráficos no HTML5</title>
</head>
<body>

  <h1>Gráficos e Interatividade</h1>

  <h2>Canvas</h2>
  <canvas id="meuCanvas" width="400" height="200">
    Seu navegador não suporta canvas.
  </canvas>

  <script>
    const canvas = document.getElementById('meuCanvas');
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'green';
    ctx.fillRect(20, 20, 150, 100);
  </script>

  <h2>SVG</h2>
  <svg width="200" height="200">
    <rect x="10" y="10" width="100" height="100" fill="blue"/>
    <circle cx="150" cy="150" r="40" fill="red"/>
  </svg>

  <h2>Iframe</h2>
  <iframe width="560" height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    frameborder="0"
    allowfullscreen>
  </iframe>

</body>
</html>

Conclusão

O HTML5 tornou possível criar experiências ricas, interativas e visuais diretamente no navegador, sem plugins externos. Usar corretamente <canvas>, <svg> e <iframe> permite criar desde gráficos simples até jogos completos e dashboards interativos.

Próximo Passo

O próximo módulo aborda as APIs Nativas do HTML5, explorando funcionalidades como geolocalização, armazenamento local, drag & drop, web workers e muito mais, que ampliam o poder do HTML5 além da simples marcação.

Updated on
Formulários
APIs Nativas