Canvas幸运转盘：替换文本为图片后定位异常的技术求助

我正在制作一个用图片而非文本展示奖品的幸运转盘。原本使用ctx.fillText(sector.label, rad - 50, 10);可以正确填充奖品的文本标签，但希望将其替换为图片。然而，当我使用ctx.drawImage(sector.image, rad - 50, 10)时，所有图片都渲染在同一位置。我尝试添加了如下loadImage函数：

const loadImage = (ctx, sector, ang) => {
    const img = new Image();
    img.onload = function () {
      ctx.drawImage(img, rad - 50, 10); // 可自行调整偏移量
    };
    img.src = sector.image;
};

该函数能加载图片，但所有图片仍显示在同一位置。

为什么ctx.fillText()能正确定位文本，而图片却不行？

我看过相关问题，但希望使用Canvas而非CSS实现。

问题原因及解决方法 #

核心原因 #

1. 坐标系上下文丢失：绘制文本时，你应该是在每个扇区对应的旋转坐标系中操作（先save()画布状态，旋转后绘制文本，再restore()恢复），但loadImage里的drawImage是在图片异步加载完成后执行的，此时之前的旋转状态已经被还原，所以所有图片都绘制在原始坐标系的固定位置。
2. 异步加载的时序问题：图片加载是异步过程，onload触发时，绘制当前扇区的上下文已经结束，无法继承当时的旋转角度。

解决步骤 #

1. 预加载所有图片

先把所有扇区的图片加载完成，再开始绘制转盘，避免异步加载导致的上下文丢失：

function preloadImages(sectors) {
  return Promise.all(sectors.map(sector => {
    return new Promise(resolve => {
      const img = new Image();
      img.onload = () => {
        sector.img = img; // 将加载好的图片存入扇区对象
        resolve();
      };
      img.src = sector.image;
    });
  }));
}

2. 在旋转坐标系中绘制图片

和绘制文本的逻辑一致，在每个扇区的旋转状态下绘制图片：

function drawWheel(ctx, sectors, rad) {
  preloadImages(sectors).then(() => {
    let currentAngle = 0;
    const anglePerSector = Math.PI * 2 / sectors.length;

    sectors.forEach(sector => {
      ctx.save();
      // 将原点移到转盘中心
      ctx.translate(rad, rad);
      // 旋转到当前扇区的中间位置
      ctx.rotate(currentAngle + anglePerSector / 2);

      // 绘制图片，根据图片尺寸调整偏移量（示例为50px宽的图片居中）
      ctx.drawImage(sector.img, -25, -rad + 20);

      ctx.restore();
      currentAngle += anglePerSector;
    });
  });
}

关键说明 #

• 预加载保证图片绘制时已就绪，不会错过画布的旋转状态。
• 绘制前通过translate和rotate调整坐标系，让图片跟随旋转到对应扇区位置。
• drawImage的坐标需要根据你的图片尺寸和布局需求调整，确保图片显示在扇区内合适的位置。

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