更改HTML5画布中形状的颜色

Question

我正在使用html5显示交互式地图。

我已创建地图的区域为数字（表示坐标） 等的阵列：

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

和我还创建了一个地图，其是区域 像的数组：

map=[zone1, zone2....] 

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

当我点击时要填充区域的颜色时，会出现困难。

有人有想法吗？

PS：

• 我所做的形状是不规则的
• 我在使用JavaScript库如jQuery或其他任何

Answer 1

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

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

Answer 2

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

• 使用SVG绘制你需要什么（check exampleson W3Schools）
• 使用一些JS帆布库，增加了抽象提供形状的概念（看看EasleJS）
• 写你自己抽象画布以提供形状

但是你应该知道，即使有这样的库，“形状”也会被完全重绘。可能整个场景都会重绘。 SVG减轻了这一点，它的性能随着形状/对象数量的增长而下降。