網上看到許多寫的canvas中事件，不勝其煩，覺得寫的也不知道是什麼
今天思考了一個分享給大家，歡迎指導改進
html
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
js
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>
順便給大家推薦一個超好用的php集成環境，PHPEnv
