更改 HTML5 画布中形状的颜色答案

【问题标题】：Changing colors of shapes in HTML5 canvas更改 HTML5 画布中形状的颜色
【发布时间】：2012-11-09 13:29:33
【问题描述】：

我正在努力在 html5 中显示交互式地图。

我已将地图区域创建为数字数组（表示坐标）喜欢：

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

我还创建了一个地图，它是一个区域数组喜欢：

map=[zone1, zone2....]

使用context.lineTo() 函数在画布中绘制区域没有问题，就像我能够在单击时捕获鼠标位置并使用多边形算法中的点确定用户单击了哪个区域一样。

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

有人有想法吗？

PS：

【问题讨论】：

【解决方案1】：

HTML5 Canvas 不知道您可以操作的对象形状的概念。您的情况有两种选择：

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

【讨论】：

【解决方案2】：

你不能。您创建的形状一旦添加到画布上就不是变量或以任何方式可引用的。您可以在旧颜色上用新颜色重新绘制形状，但我认为最好的办法是使用库来为您处理。

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

【讨论】：