提升Canvas性能：绘制300个对象鼠标移动卡顿问题咨询

嘿，别慌！Canvas完全能轻松处理300甚至更多对象的绘制，鼠标移动时卡顿绝对不是Canvas的锅，大概率是你的绘制逻辑还有优化空间。我来给你梳理几个关键优化点，结合你的代码来调整：

1. 用requestAnimationFrame控制绘制频率，避免鼠标事件过度触发绘制 #

鼠标移动事件（mousemove）的触发频率非常高（每秒可能几十上百次），如果每次触发都直接执行绘制逻辑，浏览器会不堪重负。正确的做法是：在鼠标移动时只更新状态（比如鼠标坐标），然后交给requestAnimationFrame来同步浏览器刷新频率进行绘制。

示例代码调整：

// 先定义全局状态变量存储鼠标位置
let mouseX = 0, mouseY = 0;

// 鼠标移动只更新坐标，不直接绘制
canvas.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// 用requestAnimationFrame驱动动画循环
function animate() {
  // 1. 更新所有星星的位置（基于当前mouseX/mouseY）
  updateStars();
  // 2. 绘制星星
  drawStars();
  // 3. 循环调用
  requestAnimationFrame(animate);
}

// 启动动画
animate();

2. 批量绘制，减少Canvas API调用次数 #

Canvas的API调用（比如beginPath、fill、stroke）是比较耗时的操作。如果你的代码是循环每个星星都单独调用beginPath和fill，那500个星星就会触发500次这些API，开销很大。

优化思路：同颜色的星星批量绘制，把相同颜色的星星路径一次性添加到同一个路径里，然后统一填充：

function drawStars() {
  // 先清空画布（如果需要全量重绘）
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 按颜色分组批量绘制
  starColors.forEach(color => {
    ctx.fillStyle = color;
    ctx.beginPath(); // 只针对当前颜色开启一次路径
    stars.forEach(star => {
      if (star.color === color) {
        // 直接添加矩形路径到当前路径中
        ctx.rect(star.x, star.y, star.size, star.size);
      }
    });
    ctx.fill(); // 统一填充当前颜色的所有星星
  });
}

这样原来500次的beginPath和fill就会减少到4次（对应你的4种颜色），性能提升非常明显。

3. 避免不必要的计算与状态切换 #

• 提前缓存星星的属性：比如星星的大小、颜色这些固定属性，初始化时就赋值好，不要每次绘制时再计算。
• 关闭不需要的Canvas特性：如果你的星星不需要透明度，不要设置globalAlpha；如果没有渐变/阴影效果，确保这些状态都是默认值，避免额外开销。
• 画布尺寸要匹配：用canvas.width和canvas.height设置画布的实际像素尺寸，不要用CSS拉伸画布，否则会导致绘制模糊且增加渲染计算量。

4. 局部重绘（可选） #

如果星星的移动范围有限，鼠标移动时不需要清空整个画布，只重绘上一帧星星所在的区域和当前帧星星的区域，进一步减少绘制量。不过这个需要额外记录星星的上一位置，适合场景比较固定的情况。

按照这些方法调整后，别说300个星星，500个甚至更多都能流畅运行。Canvas的性能潜力很大，关键在于减少API调用和控制绘制频率～

内容的提问来源于stack exchange，提问作者Schotsl