删除mouseout上的画布矩形边框

Remove canvas rectangle border on mouseout

本文关键字：布矩形 边框 mouseout 删除      更新时间：2024-06-08

假设我在画布上创建了一个矩形，如下…

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();
});

然后，当您在文本上移动鼠标时，矩形周围会出现边框。但假设我希望鼠标离开画布区域后边界消失。我需要重新绘制整个矩形吗？或者有更简单的方法来删除边框吗？

这只是一个简单的例子。我实际的画布在矩形中包含了几幅画，所以每次都要重新绘制它会很痛苦。只是好奇是否有更简单的方法。

我已经尝试了样式属性，但这不起作用。

以下是上面代码的一部分：http://jsfiddle.net/wqbrnm0o/

用于更改画布的通常模式是擦除整个画布并重新绘制所有所需内容。画布的速度足以处理大多数重绘。所以你可以在鼠标悬停的矩形上画出笔划，然后你就可以擦除&在mouseout上不使用笔划的情况下重新绘制所有内容。

如果您仍然觉得需要保留内容，可以在第一个画布上创建第二个画布。

在鼠标悬停时，只在顶部画布上绘制"高亮"笔划。

在mouseout上，您可以简单地清除顶部画布。包含所有其他内容的底部画布将不受影响。

您可以在顶部画布上设置CSS pointer-events:none;属性，以便底部画布接收所有鼠标事件。

您还可以在mouseleave上创建第二个事件，在该事件中，您用白色笔划在旧矩形的顶部绘制一个新矩形。

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.rect(20, 20, 150, 100);
    ctx.strokeStyle="#000000";
    ctx.stroke();
});
c.addEventListener('mouseleave', function() {
    ctx.rect(20, 20, 150, 100);
    ctx.strokeStyle="#ffffff";
    ctx.stroke();
});

相关文章：