分享一个在canvas中的点击事件

最新推荐文章于 2024-09-20 18:42:06 发布

echone_wenqian

最新推荐文章于 2024-09-20 18:42:06 发布

阅读量1.5w

点赞数 1

分类专栏： JS 文章标签： html canvas 2d canvas-api

本文链接：https://blog.csdn.net/qq_24729895/article/details/76348974

版权

JS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文介绍了一种在HTML5 Canvas中实现图形区域点击事件的方法。通过存储已绘制图形的位置和尺寸信息，当用户点击Canvas时，可以检测到点击是否发生在特定的图形区域内，并触发相应的反馈。此方法适用于简单的交互式应用程序。

摘要由CSDN通过智能技术生成

网上看到许多写的canvas中事件，不胜其烦，觉得写的也不知道是什么

今天思考了一个分享给大家，欢迎指导改进

html

<body>
	<canvas id="mycanvas" width="500" height="500"></canvas>
</body>

let canvas = document.getElementById('mycanvas'),
	ctx = canvas.getContext('2d')
//存储所画图形区域
//let tempXY = {x,y,r,i},
let	clickXY = []
//图形1
ctx.fillRect(0,0,100,100)
clickxY.push({x:0,y:0,r:100})
//图形2
ctx.fillRect(150,150,100,100)
clickxY.push({x:150,y:150,r:100})


canvas.addEventListener('click', function(e) {
	 let canvas = canvas 
	 var x = event.pageX - canvas.getBoundingClientRect().left
	 var y = event.pageY - canvas.getBoundingClientRect().top
	for(let i of clickXY) {
	    if (x > (i.x - i.r) && x < (i.x + i.r) && y > (i.y - i.r) && y < (i.y + i.r)) {
	      alert(i)
	      //这里可以根据i 来确定你需要执行的方法
	      break
	    }
	}
}, false)

可运行图形

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圆形扩散</title>
    <style>
        canvas {
            background: #000000;
        }
    </style>
</head>

<body>
   <canvas id="mycanvas" width="500" height="500"></canvas>
   <script>
        let canvas = document.getElementById('mycanvas'),
            ctx = canvas.getContext('2d')
        //存储所画图形区域
        //let tempXY = {x,y,r,i},
        let clickXY = []

        ctx.fillStyle = "red"
        //图形1
        ctx.fillRect(0,0,100,100)
        clickXY.push({x:0,y:0,r:100,i:1})

        //图形2
        ctx.fillStyle = "red"
        ctx.fillRect(200,200,100,100)
        clickXY.push({x:200,y:200,r:100,i:2})

        canvas.addEventListener('click', function(e) {
             var x = event.pageX - canvas.getBoundingClientRect().left
             var y = event.pageY - canvas.getBoundingClientRect().top
            for(let i of clickXY) {
                if (x > (i.x - i.r) && x < (i.x + i.r) && y > (i.y - i.r) && y < (i.y + i.r)) {
                  alert("我是第" + i.i + "个图形")
                  //这里可以根据i 来确定你需要执行的方法
                  break
                }
            }
        }, false)
   </script>
</body>


</html>