javascript - 画布鼠标悬停弧

Question

我有一个简单的问题 - 是否有检测画布弧上的鼠标悬停事件的选项？我想制作半径为 10 的弧，当鼠标悬停时“做某事”。我试图做这样的事情：

context.arc(100,200,10,0,2*Math.PI);
canvas.addEventListener('mouseover', function(e) {
    if(e.clientX == 100 && e.clientY == 200 ){
        alert('omg');
    };
});

...但它只会在鼠标恰好位于 x=100、y=200 位置时显示（而且我不确定它是否会工作）...我不想使用 KinectJS。有没有其他方法可以做到这一点？

Answer 1

我不知道你的场景有多复杂。如果您在画布上只有那个弧，您可以getPixel在鼠标悬停时使用颜色拾取 ( ) 并将颜色与弧颜色进行比较。

如果场景更复杂，并且您有多个具有相同颜色的形状，您可以维护另一个隐藏的画布，您可以在其中以特定颜色（每个对象使用不同的颜色）绘制形状。然后对该画布执行颜色选择检查。