图片热点区域中，rect 矩形区域，使用2个做点来确定具体位置和大小。
shape="rect"coords="x1,y1,x2,y2"
以图片的左上角为坐标原点，矩形的左上角坐标x1,y1和矩形的右下角坐标x2,y2来确定具体位置和大小。
结合具体的代码来解释
coords="0,0,110,260"0,0就是矩形的左上角坐标
该点距离图片的左上角横向距离为0
该点距离图片的左上角纵向距离为0
110,260就是矩形的右下角坐标
该点距离图片的左上角横向距离为110
该点距离图片的左上角纵向距离为260
图示
<canvas id="myCanvas" width="500px" height="400px"></canvas>document.getElementById("myCanvas").onclick = function circle(event) {
x = event.clientX
y = event.clientY
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")
context.clearRect(0,0 ,500,400)
context.fillStyle = "#f00"
context.beginPath()
context.arc(x,y,10,0, Math.PI*2)
context.closePath()
context.fill()
}
可以出现N个。具体格式如下：<img src="images/XXX.gif" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,6,24,19" href="#" />
<area shape="rect" coords="35,7,56,19" href="#" />
</map>
建议搜一下具体使用方法
