如何在html5canvas中制作可点击的点？

我正在玩一个简单的 HTML5canvas绘制线教程 。 因为它基于jQuery，所以很容易为绘图添加很多效果。

如何在点击/hover（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(); } 

如何添加jquery选择器？ 基本上，我想在点击或hover时显示点坐标 。

Answer 1

问题是jQuery适用于DOM而不是canvas上的绘图。 您需要做的是将这些点存储在某处并hover在canvas元素上，检查鼠标相对于canvas的坐标（即如果将鼠标放在canvas的左上角，则coords为[ 0,0]）在点/形状的区域内。 如果是这样，鼠标hover点，您可以显示效果。

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

Answer 2

您可以使用像EaselJS这样的框架，它可以在您添加到canvas上的对象上抽象处理鼠标事件的所有艰苦工作。