画布鼠标悬停弧

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）并将颜色与弧形颜色进行比较。

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