html - 点击 map 示例对我不起作用

Question

很抱歉这个愚蠢的问题! :D

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

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

Answer 1

更新

最初关于 CORS 的假设在此处并非如此。

该代码似乎在 Chrome 中有效，尽管 CORS 通常是下载文件和使用具有本地 (file://) 文件引用的 Canvas 时的原因。由于此处通过 XAMMP 使用 localhost，这不是原因，事实证明在线代码中存在不止一个错误。

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

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

由于 offsetX/Y，这将导致 NaN 值，当然不能用于任何索引。

比较合适的做法是这样的，这里也补偿 Canvas 偏移:

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

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

校正位置至少会为像素阵列提供一个可用的索引，该索引又会返回一个有效的(事实证明不一定正确，这会留下图像检查，以防万一应用 Gamma /颜色校正... .) 红色组件的值(测试时仍然存在问题，但如前所述，它有点超出了进行全面调试和更正的范围)。

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