<canvas width="300" height="300" style="border:1px solid #c3c3c3">
</canvas>
</div>
<scripr>
var pp=document.getElementById("cd")
pp.onclick=function(e){
e=e||event
var x=e.clientX-pp.offsetLeft//获取点击后x的坐标
var y=e.clientY-pp.offsetTop//获取点击后y的坐标
alert(x)
alert(y)
}
</scripr>
只能获取鼠标对于画布的事件,可以根据点击范围判断点击的内容,然后做相应 *** 作
<!doctype html><html>
<head></head>
<body>
<canvas id="canvas" width="500" height="500" style = "border:1px solid red"></canvas>
<script>
var rect={x:100,y:100,w:40,h:20}//定义要画的矩形的位置属性
var canvas=document.getElementById('canvas')
var cxt=canvas.getContext('2d')
cxt.fillRect(rect.x,rect.y,rect.w,rect.h)//绘制矩形
canvas.onclick=function(e){//给canvas添加点击事件
e=e||event//获取事件对象
//获取事件在canvas中发生的位置
var x=e.clientX-canvas.offsetLeft
var y=e.clientY-canvas.offsetTop
//如果事件位置在矩形区域中
if(x>=rect.x&&x<=rect.x+rect.w&&y>=rect.y&&y<=rect.y+rect.h){
window.open('链接地址')//打开指定链接
}
}
</script>
</body>
</html>
canvas真挺click事件,然后自己计算是否点在了图形上。 可以直接用引擎,事件都是封装好了的。canvas元素的omclick等事件就可以啊,我不清楚如何获得canvas的坐标,因为我要区分单击的是哪个位置
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)