假设我在 Canvas 上创建了一个矩形，如下所示...
var c = document.createElement("canvas");
document.body.appendChild(c);
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.fillText('hover mouse here', 60, 60);
c.addEventListener('mouseover', function() {
ctx.stroke();
});
然后，当您将鼠标移到文本上时，矩形周围会出现边框。但假设我希望边框在鼠标离开 Canvas 区域后消失。我需要重新绘制整个矩形还是有更简单的方法来删除边框？
这只是一个简单的例子。我的实际 Canvas 在矩形中包含多个绘图，因此每次都必须重新绘制它会很痛苦。只是好奇是否有更简单的方法。
我已经尝试过样式属性，但不起作用。
这是上面代码的一个 fiddle :http://jsfiddle.net/wqbrnm0o/
最佳答案
更改 Canvas 的常用模式是删除整个 Canvas 并重新绘制所有所需的内容。 Canvas 的速度足以处理大多数重绘。因此，您可以在鼠标悬停时在矩形上绘制笔划，并在鼠标移开时删除并重绘所有内容，而无需笔划。
如果您仍然觉得需要保留内容，可以创建第二个 Canvas 来覆盖第一个 Canvas 。
鼠标悬停时，您仅在顶部 Canvas 上绘制“突出显示”笔划。
鼠标移开时，您可以简单地清除顶部 Canvas 。包含所有其他内容的底部 Canvas 将不受影响。
您可以在顶部 Canvas 上设置 CSS pointer-events:none; 属性，以便底部 Canvas 接收所有鼠标事件。
关于javascript - 删除鼠标悬停时的 Canvas 矩形边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28758133/