前端 Canvas 基础绘图与动画实战

正确实现

// 正确实现：Canvas 基础绘制
function basicDrawing() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  // 设置画布尺寸
  canvas.width = 800;
  canvas.height = 600;
  // 绘制矩形
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 100, 100);
  // 绘制圆形
  ctx.beginPath();
  ctx.arc(250, 100, 50, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
  // 绘制路径
  ctx.beginPath();
  ctx.moveTo(350, 50);
  ctx.lineTo(450, 150);
  ctx.lineTo(350, 150);
  ctx.closePath();
  ctx.strokeStyle = 'green';
  ctx.lineWidth = 2;
  ctx.stroke();
  // 绘制文本
  ctx.font = '24px Arial';
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  ctx.fillText('Canvas 绘制示例', canvas.width / 2, 30);
}

// 正确实现：Canvas 动画
function canvasAnimation() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 600;
  let x = 0;
  let y = canvas.height / 2;
  let dx = 2;
  let dy = 2;
  const radius = 20;

  function animate() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制移动的圆形
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = 'purple';
    ctx.fill();
    // 边界检测
    if (x + radius > canvas.width || x - radius < 0) { dx = -dx; }
    if (y + radius > canvas.height || y - radius < 0) { dy = -dy; }
    // 更新位置
    x += dx;
    y += dy;
    // 使用 requestAnimationFrame
    requestAnimationFrame(animate);
  }
  animate();
}

// 正确实现：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;

  // 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();

  // 绘制数据
  const maxValue = Math.max(...data);
  const barWidth = chartWidth / data.length;
  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';
}

技术总结

Canvas 是一个强大的工具，可用于创建从简单图表到复杂游戏的各种视觉效果。

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

前端 Canvas 是构建高质量 Web 视觉体验的关键技术之一。