Integrando o Canvas em Projetos Web
Adicionando Gráficos Interativos ao seu Site
No módulo anterior, aprendemos os fundamentos do HTML Canvas, agora, vamos explorar como integrar o Canvas em projetos web para criar gráficos interativos e visualmente atraentes.
1. Configuração Inicial
Antes de começarmos, certifique-se de ter um arquivo HTML básico com um elemento Canvas no qual desejamos integrar gráficos. Vamos usar um exemplo de gráfico de barras simples.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gráfico de Barras Interativo</title> <style> canvas { border: 1px solid #000; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="meuCanvas" width="400" height="200"></canvas> <script> var canvas = document.getElementById("meuCanvas"); var contexto = canvas.getContext("2d"); </script> </body> </html>
2. Desenvolvimento do Gráfico de Barras
Vamos criar uma função que desenha um gráfico de barras simples com base em um conjunto de dados.
function desenharGraficoBarras(dados) { var larguraBarra = canvas.width / dados.length - 5; dados.forEach(function(valor, indice) { var alturaBarra = valor * 2; // Ajuste para melhor visualização var x = indice * (larguraBarra + 5); var y = canvas.height - alturaBarra; contexto.beginPath(); contexto.rect(x, y, larguraBarra, alturaBarra); contexto.fillStyle = "blue"; contexto.fill(); contexto.stroke(); }); } // Exemplo de dados para o gráfico var dadosExemplo = [20, 50, 30, 40, 60]; desenharGraficoBarras(dadosExemplo);
3. Adicionando Interatividade
Agora, vamos adicionar interatividade ao gráfico. Ao clicar em uma barra, ela mudará de cor.
canvas.addEventListener('click', function(evento) { var rect = canvas.getBoundingClientRect(); var mouseX = evento.clientX - rect.left; var barraClicada = Math.floor(mouseX / (canvas.width / dadosExemplo.length)); contexto.clearRect(0, 0, canvas.width, canvas.height); desenharGraficoBarras(dadosExemplo); // Destacar a barra clicada contexto.beginPath(); contexto.rect( barraClicada * (canvas.width / dadosExemplo.length), canvas.height - dadosExemplo[barraClicada] * 2, canvas.width / dadosExemplo.length - 5, dadosExemplo[barraClicada] * 2 ); contexto.fillStyle = "red"; contexto.fill(); contexto.stroke(); });
Visualização do código
Este exemplo simples demonstra como integrar o Canvas em projetos web, criando gráficos interativos.
A interatividade pode ser estendida para atender aos requisitos específicos do seu projeto, proporcionando uma experiência visual envolvente para os usuários.