移除鼠标移出时的 canvas 矩形边框

Question

假设我像这样在 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/

Answer 1

用于更改 canvas 的常用模式是擦除整个 canvas 并重绘所有需要的内容。 Canvas 足以处理大多数重绘。所以你会在鼠标悬停时在你的矩形上绘制笔划，你会在鼠标移开时擦除并重绘所有没有笔划的内容。

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

鼠标悬停时，您只在顶部 canvas 绘制 "highlight" 笔划。

在 mouseout 上，您可以简单地清除顶部 canvas。底部 canvas 和所有其他内容将不受影响。

你可以设置 CSS pointer-events:none; 属性在顶部 canvas 这样底部 canvas 接收所有的鼠标事件。

Answer 2

您还可以在 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();
});

移除鼠标移出时的 canvas 矩形边框

Remove canvas rectangle border on mouseout

html

javascript

canvas