更改HTML5画布中形状的颜色

Question

我正在研究在html5中显示交互式地图。

我已经将地图区域创建为数字数组（代表坐标），例如：

Zone1=[{x=3,y=4}, {x=8,y=5}]

而且我还创建了一个地图，其中包含一系列区域，例如：

map=[zone1, zone2....]

我没有问题可以使用context.lineTo()函数在画布上绘制区域，这与我能够捕获单击时鼠标位置并使用多边形算法中的点确定用户单击的区域相同。

当我想在单击区域时填充区域的颜色时，就会出现困难。

有人有想法吗？

PS：

• 我做的形状不规则
• 我不喜欢使用jQuery等JavaScript库

Answer 1

HTML5 Canvas不了解您可以操纵的对象形状的概念。 您有两种选择：

• 使用SVG绘制所需的内容（ 在W3Schools上 查看示例 ）
• 使用一些JS画布库，该库添加了抽象以提供形状的概念（请查看EasleJS ）
• 在画布上编写自己的抽象以提供形状

但是，您应该知道，即使有了这样的库，“形状”也将被完全重绘。 可能会重绘整个场景。 SVG可以缓解这种情况，随着形状/对象数量的增加，其性能会降低。

Answer 2

你不能 将创建的形状添加到画布后，它们就不会成为变量或任何形式的引用。 您可以在旧颜色上用新颜色重新绘制形状，但是我认为最好的选择是使用一个库来为您处理。

由于我自己使用过，因此我的建议是Kinetic.js，但是有很多可供选择。