Question

假设我在画布上创建一个矩形，就像这样......

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/

Answer 1

用于更改画布的常用模式是擦除整个画布并重绘所有所需内容。 Canvas足够快，可以处理大多数重绘。因此，您可以在鼠标悬停时在笔划上绘制笔划，然后擦除＆amp;在mouseout上不重写所有内容。

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

在鼠标悬停时，您只绘制＆＃34;突出显示＆＃34;在顶部画布上划动。

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

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

Answer 2

您还可以在mouseleave上创建第二个事件，在此处使用白色笔触颜色在旧的矩形上方描边。

＆＃13;

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

＆＃13;

在mouseout上删除画布矩形边框

2 个答案: