Javascript 如何在html5画布中创建可点击点？

我正在玩一个在

HTML5

canvas中画线的游戏。因为它是基于jQuery的，所以很容易在图形中添加很多效果

如何使点可单击/可悬停以在单击/悬停（mouseenter/mouseleave）时添加jquery效果？这些点是由

c.fillStyle = '#333';

for(var i = 0; i < data.values.length; i ++) {
    c.beginPath();
    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
    c.fill();
}

c.fillStyle='#333'；
对于（变量i=0；i

---

如何添加jquery选择器？基本上，我想在单击或悬停时显示点坐标。问题是jQuery使用DOM，而不是画布上的图形。您需要做的是将这些点存储在某个位置，并在画布元素上悬停时，检查鼠标相对于画布的坐标（即，如果将鼠标放置在画布的左上角，坐标为[0,0]）是否在点/形状的区域内。如果是这样，则鼠标悬停在该点上，您可以显示效果

Psuedocode以更好地理解：

// adding shapes to the canvas
var shapes = [];  // make that rects for simplicity.
For (condition):
    shapes.push ( new Rect(x,y,width,height) );
    canvas.rect( x, y, width, height );

// testing hover.
$("#canvas").mousemove(function(e) {
    var offsetX = e.pageX - $(this).position().left;
    var offsetY = e.pageY - $(this).position().top;

    Foreach shape in shapes:
        if( shape.contains(offsetX, offsetY) )    // a fictious method, implement it yourself...lookup for collision detection; not exactly that but something like that...
            Mouse hovers! do something great.
});

好的，也许要确定一个点是否包含在一个矩形中，可以使用如下方法：

function contains(rect, x, y) {
    return (x >= rect.x &&
            x <= rect.x + rect.width &&
            y >= rect.y && 
            y <= rect.y + rect.height )
}

函数包含（rect、x、y）{
返回（x>=rect.x&&
x=矩形y&&
y您可以使用这样的框架，它将处理添加到画布上的对象上的鼠标事件的所有艰苦工作抽象出来。
有很多这样的框架可以为您完成这些工作，请尝试使用一个框架。因为它基于jQuery，所以很容易为绘图添加很多效果这不是真的，您将无法在画布对象上使用jquery动画，画布的级别有点低，您必须自己实现所有动画效果！jquery与DOM ElementsHanks配合使用，效果真是太棒了！