運行截圖如下：
點擊某個圓後：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
let balls = [];
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
window.onload = function(){
canvas.width = 800;
canvas.height = 800;
for(let i = 0; i < 10; i++){
let ball = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random() * 50 + 20
};
balls[i] = ball;
}
draw();
canvas.addEventListener("mouseup", detect);
}
function draw(){
for(let i = 0; i < balls.length; i++){
context.beginPath();
context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
context.fillStyle = "#058";
context.fill();
}
}
function detect(event){
let x = event.clientX - canvas.getBoundingClientRect().left;
let y = event.clientY - canvas.getBoundingClientRect().top;
console.log("x:" + x + " y:" + y);
for(let i = 0; i < balls.length; i++){
context.beginPath();
context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
if(context.isPointInPath(x, y)){
context.fillStyle = "red";
context.fill();
}
}
}
</script>
</body>
</html>
這裏簡單說下邏輯，通過canvas.addEventListener監聽鼠標彈起的事件，然後通過
let x = event.clientX - canvas.getBoundingClientRect().left;
let y = event.clientY - canvas.getBoundingClientRect().top;
獲取當前再canvas中的點的座標，每次鼠標彈起的時候就進行重繪。
if(context.isPointInPath(x, y)){
context.fillStyle = "red";
context.fill();
}
isPointInPath()方法當點位於當前路徑中，則返回true，否則返回false
下面給出另外一種方法：
function mouseoverFunction(event){
let mouseX = event.offsetX;
let mouseY = event.offsetY;
for(let i = 0; i < XXXXXXXObjects.length; i++){
if(
(XXXXXXXObjects[i].x <= mouseX && (XXXXXXXObjects[i].x + XXXXXXXObjects[i].width) >= mouseX) &&
(XXXXXXXObjects[i].y <= mouseY && (XXXXXXXObjects[i].y + XXXXXXXObjects[i].height) >= mouseY)
){
XXXXXXXObjects[i].onClicked();
}
}
}
通過這種方式也可以獲取x，y在canvas中的座標，並且判斷數組裏面的圖形，x，y是否在點擊的座標中，如果是就調用onClicked函數。