html5canvers中的按钮

最新推荐文章于 2022-11-06 17:41:14 发布

milijiangjun

最新推荐文章于 2022-11-06 17:41:14 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/milijiangjun/article/details/77184896

版权

<!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.οnclick=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>