画布中的区域选择答案

【问题标题】：Region selection in canvas画布中的区域选择
【发布时间】：2011-09-07 16:27:40
【问题描述】：

我正在使用画布建立一个实验性的 html5 网站。我正在绘制 3 个彼此相邻的圆圈，我只想知道如何选择它们。

在某种程度上，我希望它们成为链接。不是标签，因为一切都将使用 javascript 创建。

类似动态 JS 的东西：http://www.kineticjs.com/，但没有额外的库。

我发现了一些使用幽灵画布和上下文的脚本，但这些示例是用于拖动和填充的。我只想能够选择我的形状并执行一些代码。

谢谢！

【问题讨论】：

diveintohtml5.org/canvas.html#halma – 因为你在谈论一个概念而没有告诉我们你尝试了什么。撕开它 - 它将向您展示如何计算“合法”点击并执行操作。
html5canvastutorials.com/advanced/html5-canvas-path-mouseover - 我正在尝试这样做，但没有库。但是如果没有其他方法（不太复杂）我会使用这个。
是的，其中所做的一切都可以在没有库的情况下通过拆开那个 halma 游戏来完成。该库只是减少了编写代码的工作量。拖动、单击、放下、鼠标悬停——这些只是事件。你不需要图书馆来做这件事。

【解决方案1】：

我想你可能想研究一下 IsPointInPath() 方法。它将帮助您确定鼠标是否单击了您的画布对象。

【讨论】：

【解决方案2】：

如果你擅长 xml，我建议你使用 canvas + SVG (http://www.w3schools.com/svg/)

关于 SVG 和 Canvas ，区别很明显，因为您可以在 SVG 中加载位图，并且可以使用 canvas API 绘制线条。但是，使用一种技术比另一种技术更容易创建图像，具体取决于您的图形是主要基于线条还是更像图像。

【讨论】：