javascript - HTML5 Canvas 问题

Question

我正在编写一个脚本来完成几件事。简而言之，这就是它需要做的事情:

1. 从页面读取坐标并能够在特定区域内弹出一个框。
2. 弹出框需要能够跟随鼠标移动。
3. 我需要能够修改框以使其看起来像我想要的那样(我正在考虑将 div 容器设置为显示:隐藏，然后 JS 将显示设置为当鼠标位于指定区域时阻止) .
4. 我需要能够轻松修改它(又名，添加和减去对象和坐标集)

我最初使用的是 HTML map ()，效果很好，直到我调整了浏览器的大小，并且跟随鼠标的 div 不再正确排列。关于偏移量无法正常工作的问题，我无法让它正常工作，所以我切换到 HTML Canvas 。现在我已经正确地获得了 Canvas 中的坐标，但我只是不知道当鼠标位于某个部分内时如何弹出一些内容。这是我当前的代码:

function drawLines(numbers, color){
//poly [x,y, x,y, x,y.....];
var poly=numbers;
context.fillStyle = color;
context.beginPath();
context.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 )
    {context.lineTo( poly[item] , poly[item+1] )};
context.closePath();
context.fill();

}

我已经获得了数组中的每个区域，然后将其一一传递给函数。颜色是一个测试，我可以轻松地让每个区域显示为指定的颜色，但这并不能解决我的问题。有任何想法吗？谢谢!

Answer 1

由于样式问题而跳转到 Canvas 似乎很奇怪，但忽略这一点......

您可以在 Canvas 元素上绑定(bind) mousemove 事件，然后对您的区域进行 HitTest 以查看鼠标是否在该区域内。

根据测试区域的数量，有效地进行 HitTest 可能会很棘手，但这绝对是可行的。

Canvas 就像任何其他 block 级元素一样，因此应用相同的事件并以相同的方式绑定(bind)。

下面是鼠标事件与 Canvas 交互的一个示例。在此示例中，事件绑定(bind)到文档，但类似的想法也适用。

http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/