Javascript 使用html5画布在矩形上方查看鼠标上的背景图像

下面是我在JSFIDLE上的代码：

为了复制我的问题，请执行以下步骤：

• 单击图像并拖动鼠标以创建矩形

• 完成后，将鼠标放在矩形上，我的问题来了，您将看到一个黑色的矩形

我想当你把鼠标移到一个矩形上时，你会看到图像而不是黑色

当我在下面取消注释（ctx.clearRect）时：

---

和鼠标在长方形上，我看到了灰色，看起来我们看到了空白的背景…我想看看矩形下的图像。

嘿，这是我的狮子！（一直想这么说；-）@kaido loool是的！是一个伟大的图像：DPS：更严重的是，你的问题是你从来没有在循环中的画布上重画过你的imageObj，所以你所有几乎透明的黑色矩形最终都会在一个完全不透明的矩形中相乘。只要在你的循环中调用

drawImage

，它就被修复了：@kaido-Man！！！你是老板。。。我没有理由支持你的答案。。。但一旦我得到了他们，我会做的。。。非常感谢！！！你让我开心：“（@kaido Like promize我对你的评论投了赞成票；）嘿，是我的狮子！（一直想这么说；-）@kaido loool是的！是一个伟大的图像：DPS：更严重的是，你的问题是你从来没有在循环中的画布上重画过你的imageObj，所以你所有几乎透明的黑色矩形最终都会在一个完全不透明的矩形中相乘。只要在你的循环中调用

drawImage

，它就被修复了：@kaido-Man！！！你是老板。。。我没有理由支持你的答案。。。但一旦我得到了他们，我会做的。。。非常感谢！！！你成就了我的一天：'（@kaido Like promize我对你的评论投了更高的票；）

function loop() {
  //ctx.clearRect(0,0,window.innerWidth, window.innerHeight);
  draw();
  requestAnimationFrame(loop);
}