html - Click Map 的示例对我不起作用

Question

抱歉，这个愚蠢的问题！:D

我正在尝试使用 html5 画布元素制作可点击的地图，我发现了这个很好的例子：http ://www.rubydesigner.com/blog/click-map-using-html5-canvas

但是当从 Chrome 下载它 (CTRL+S) 时它不起作用。它下载了带有JS图像的html页面和文件夹，我检查了图像的路径，但仍然没有出现地图。问题是什么？

Answer 1

更新

关于 CORS 的最初假设结果并非如此。

该代码似乎在 Chrome 中工作，虽然 CORS 通常是下载文件和使用带有本地 (file://) 文件引用的画布时的原因。由于 localhost 是通过 XAMMP 在这里使用的，因此这不是原因，事实证明在线代码中存在多个错误。

特别是它计算鼠标坐标的方式：

var datapos = ((e.offsetY-2) * 300 * 4) + ((e.offsetX-1) * 4);

这将产生一个NaN值，因为offsetX/Y它当然不能用于任何索引。

更合适的方式是这样的，这里也补偿画布偏移：

var rect = map_wrapper.getBoundingClientRect();
var datapos = ((e.clientY - (rect.top |0)) * 300 * 4) +
              ((e.clientX - (rect.left|0)) * 4);

但是，我从来没有遇到过一个元素的浮点位置，这似乎是这里的情况（rect.top 在我的浏览器中显示一个浮点值，另一个小惊喜），因此我在这里将值强制为整数（通常不一定..我没有深入研究这个）。由于调试整个代码有点超出了这里的范围，我将把它留给 OP 来定位其他错误。

校正位置至少会为像素阵列提供一个可用的索引，该索引反过来将返回一个有效的（结果不一定是正确的，这会检查图像，在应用伽马/颜色校正的情况下可以容忍......）值对于红色组件（测试时仍然存在问题，但如上所述，进行完整的调试和更正有点超出范围）。

希望这可以引导您了解其他错误所在。我没有通过html等。