Canvas判断区间点击生效

最新推荐文章于 2024-06-05 14:45:33 发布

沧桑老沈

最新推荐文章于 2024-06-05 14:45:33 发布

阅读量695

点赞数

分类专栏： H5-M500

本文链接：https://blog.csdn.net/s31213/article/details/84922932

版权

H5-M500 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<!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>