无法通过Canvas事件监听器在HTML Canvas中绘制矩形

核心原因 #

你遇到的问题本质是OffscreenCanvas的上下文线程隔离特性导致的：

• OffscreenCanvasRenderingContext2D属于离屏渲染上下文，通常运行在Web Worker线程中，主线程的鼠标事件回调无法直接调用其绘制API生效——线程隔离会阻断跨线程的上下文操作。
• 你之前循环绘制的矩形能正常显示，说明初始的OffscreenCanvas与页面Canvas的关联、上下文的基础绘制逻辑是正常的，问题仅出在主线程事件回调中直接操作跨线程上下文上。

解决方案 #

要在主线程事件中控制OffscreenCanvas绘制，必须通过线程消息通信实现，具体步骤如下：

1. 主线程：事件回调发送绘制指令 #

修改鼠标移动事件，不再直接操作上下文，而是向Worker发送绘制指令：

handleMouseMove(event: MouseEvent) {
  if (!this.drawing) return;

  const rect = this.canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // 向Worker发送绘制指令
  worker.postMessage({
    type: 'drawRect',
    x,
    y,
    width: 50,
    height: 50,
    color: 'red'
  });
}

同时确保事件监听器正确绑定，且drawing状态逻辑完整：

addEventListeners() {
  this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
  // 补充绘制状态切换逻辑
  this.canvas.addEventListener('mousedown', () => { this.drawing = true; });
  this.canvas.addEventListener('mouseup', () => { this.drawing = false; });
  this.canvas.addEventListener('mouseleave', () => { this.drawing = false; });
}

2. Worker线程：接收指令执行绘制 #

在Worker中监听主线程消息，收到指令后用OffscreenCanvas上下文完成绘制：

// Worker内部代码
let ctx;

self.onmessage = (e) => {
  // 初始化：接收OffscreenCanvas
  if (e.data.type === 'init') {
    const offscreenCanvas = e.data.canvas;
    ctx = offscreenCanvas.getContext('2d');
    // 可在此执行初始绘制逻辑
  }
  // 处理绘制指令
  else if (e.data.type === 'drawRect') {
    const { x, y, width, height, color } = e.data;
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
  }
};

3. 关联OffscreenCanvas与页面Canvas #

在主线程初始化时，将页面Canvas的控制权转移给OffscreenCanvas并发送到Worker：

const canvas = document.getElementById("player") as HTMLCanvasElement;
const offscreenCanvas = canvas.transferControlToOffscreen();
// 发送OffscreenCanvas到Worker，注意传递转移列表
worker.postMessage({ type: 'init', canvas: offscreenCanvas }, [offscreenCanvas]);

额外排查点 #

• 确认this.drawing变量在鼠标按下时被设为true，否则事件回调会直接返回。
• 检查Worker是否正确创建，且主线程与Worker的通信无错误（可通过浏览器控制台查看消息传递日志）。

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