新手求助html5 canvas画布的鼠标单击事件，谢谢！
在页面中添加一个width="500"height="500"的canvas，然后在(100,100)画一个长40高20的矩形需要鼠标单击这个矩形，能打开一个链接，<!d...
在页面中添加一个width = "500" height = "500"的canvas，
然后在(100,100)画一个长40高20的矩形
需要鼠标单击这个矩形，能打开一个链接，
<!doctype html>
<html>
<head></head>
<body>
<canvas id="test" width="500" height="500" style = "border:1px solid red"></canvas>
<script>
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
cxt.fillRect(100,100,40,20);
</script>
</body>
</html>
单击时间怎么写？谢谢各位 展开
然后在(100,100)画一个长40高20的矩形
需要鼠标单击这个矩形，能打开一个链接，
<!doctype html>
<html>
<head></head>
<body>
<canvas id="test" width="500" height="500" style = "border:1px solid red"></canvas>
<script>
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
cxt.fillRect(100,100,40,20);
</script>
</body>
</html>
单击时间怎么写？谢谢各位 展开
展开全部
只能获取鼠标对于画布的事件，可以根据点击范围判断点击的内容，然后做相应操作
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
