HTML5 中创建图片点击热点区域时 怎么知道那个区域在哪

html-css017

HTML5 中创建图片点击热点区域时 怎么知道那个区域在哪,第1张

图片热点区域中，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>

建议搜一下具体使用方法