我想了一个来绘制HTML5多边形<area>的<map>。我需要将其与单击的区域相同（从而模拟悬停效果）。我想出的代码是：
$("area").click(function () {
var $input = $(this);
var obj = $input.attr("coords");
var poly = '[' + obj + ']';
alert(poly);
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(poly[0], poly[1]);
for (item = 2; item < poly.length - 1; item += 2) {
ctx.lineTo(poly[item], poly[item + 1])
}
ctx.closePath();
ctx.fill();
});
现在问题出在该语句中var poly = '['+obj+']';，因为如果我手动输入坐标而不是obj变量，该语句将起作用，但是我需要在它周围加上[和]才能使函数起作用。
问题是$ input.attr（“ coords”）返回一个字符串，例如"10,10,100,100"或类似的字符串。您正在尝试建立一个数组，但只是得到一个类似的字符串"[10,10,100,100]"。
为了使用字符串创建数组，您可以使用split(',')，它将在每个'，'处拆分字符串，并返回一个数组，因此您可以执行以下操作：
var poly = $input.attr("coords").split(',');
然后聚会像的数组：["10", "10", "100", "100"]。
如果您已经有图像地图数据，则可以在画布上绘制区域并使它们可单击，而不是使用地图，这取决于您拥有多少区域以及您想做什么。
我还假设您在图像图中没有任何圆圈...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句