在页面中添加一个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>单击时间怎么写？谢谢各位
1 回答
Cats萌萌
TA贡献1805条经验 获得超9个赞
只能获取鼠标对于画布的事件，可以根据点击范围判断点击的内容，然后做相应操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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> |
- 1 回答
- 0 关注
- 638 浏览
添加回答
举报
0/150
提交
取消