0

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

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

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

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

map=[zone1, zone2....]

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

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

有人有想法吗？

PS：

  • 我做的形状不规则
  • 我不喜欢使用 jQuery 之类的 JavaScript 库或其他任何东西
4

2 回答 2

1

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

  • 使用 SVG 绘制你需要的东西（查看W3Schools 上的示例 ）
  • 使用一些添加抽象的 JS 画布库来提供形状的概念（查看EasleJS）
  • 在画布上编写自己的抽象以提供形状

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

于 2012-11-09T14:08:18.170 回答
0

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

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

于 2012-11-09T13:38:13.353 回答