我正在尝试在<area>的{{1}}上绘制带有HTML5的多边形。我需要它与点击的区域相同（从而模拟悬停效果）。我想出的代码是：
<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和[左右它使功能发挥作用。
答案 0 :(得分：2)
问题是$ input.attr（＆＃34; coords＆＃34;）正在返回一个字符串，比如"10,10,100,100"或类似字符串。您尝试将其设为数组，但您只是获得了"[10,10,100,100]"之类的字符串。
为了从字符串中创建一个数组，您可以使用split(',')，它将每隔一段时间拆分字符串，＆＃39;并返回一个数组，所以你可以这样做：
var poly = $input.attr("coords").split(',');
然后poly将是一个类似于：["10", "10", "100", "100"]的数组。
如果您已经拥有了图像地图数据，那么您可以在画布上绘制区域并使其可点击而不是使用地图，这取决于您拥有多少区域以及您想要做什么。
我也假设您在图像地图中没有任何圆圈...