Question

抱歉这个虚假的问题！：d

我正在尝试用html5 canvas元素创建一个可点击的地图，我找到了这个很好的例子：http://www.rubydesigner.com/blog/click-map-using-html5-canvas

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

Answer 1

<强>更新

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

代码似乎在Chrome中有效，虽然CORS通常是下载文件和使用带有本地（file：//）文件引用的canvas的原因。由于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等。

Click Map的示例对我不起作用

1 个答案: