前端 Canvas 基础与实战应用

交互与数据处理

Canvas 支持鼠标事件监听，可实现绘图板功能。同时具备图像处理能力，如像素级滤镜。

// Canvas 交互
function canvasInteraction() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 600;
  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;

  canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });

  canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });

  canvas.addEventListener('mouseup', () => { isDrawing = false; });
  canvas.addEventListener('mouseout', () => { isDrawing = false; });
}

// Canvas 数据可视化（简易柱状图）
function canvasChart() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 600;
  const data = [12, 19, 3, 5, 2, 3, 7, 11, 15, 18, 10, 6];
  const labels = ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'];
  const padding = 50;
  const chartWidth = canvas.width - padding * 2;
  const chartHeight = canvas.height - padding * 2;
  const maxValue = Math.max(...data);
  const barWidth = chartWidth / data.length;

  // X 轴
  ctx.beginPath();
  ctx.moveTo(padding, canvas.height - padding);
  ctx.lineTo(canvas.width - padding, canvas.height - padding);
  ctx.stroke();

  // Y 轴
  ctx.beginPath();
  ctx.moveTo(padding, padding);
  ctx.lineTo(padding, canvas.height - padding);
  ctx.stroke();

  // 绘制柱子
  data.forEach((value, index) => {
    const barHeight = (value / maxValue) * chartHeight;
    const x = padding + index * barWidth;
    const y = canvas.height - padding - barHeight;
    ctx.fillStyle = 'rgba(54, 162, 235, 0.6)';
    ctx.fillRect(x + 5, y, barWidth - 10, barHeight);
    ctx.font = '12px Arial';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText(labels[index], x + barWidth / 2, canvas.height - padding + 15);
  });

  ctx.font = '20px Arial';
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  ctx.fillText('月度销售数据', canvas.width / 2, padding / 2);
}

// Canvas 图像处理
function canvasImageProcessing() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 600;
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = () => {
    ctx.drawImage(img, 0, 0, 400, 300);
    const imageData = ctx.getImageData(0, 0, 400, 300);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      const gray = (r + g + b) / 3;
      data[i] = gray;
      data[i + 1] = gray;
      data[i + 2] = gray;
    }
    ctx.putImageData(imageData, 400, 0);
  };
  img.src = 'https://picsum.photos/800/600';
}

总结

• 基础绘制：矩形、圆形、路径、文本等
• 动画效果：使用 requestAnimationFrame 实现流畅动画
• 交互操作：鼠标、触摸等事件处理
• 数据可视化：绘制图表、仪表盘等
• 图像处理：像素级操作，实现滤镜效果
• 性能优化：合理使用缓存、避免频繁重绘
• 响应式：根据容器大小调整画布尺寸
• 工具库：使用 Chart.js、Fabric.js 等库简化开发