方法1 使用border-radius
将radius设置为50%,则在元素高度和宽度相等的情况下,可以得到一个圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#div {
width: 100px;
height: 100px;
background-color: #bfa;
border-radius: 50%;
color: #000;
font-size: 17px;
margin: 100px auto;
line-height: 100px;
text-align: center;
}
</style>
<script>
window.onload = function () {
var div = document.querySelector("#div");
div.addEventListener("click", function () {
alert("lalalalla");
});
};
</script>
</head>
<body>
<div id="div">可点击区域</div>
</body>
</html>
canvas实现的两种方法:
方法1:
使用canvas画一个填充了制定颜色的圆,并且根据单像素判断的方法,如果发现当前点击的像素的颜色是我们指定的颜色,则触发回调事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
margin: 100px 0 0 200px;
}
</style>
<script>
window.onload = function () {
// 1 获取画笔
var canvas = document.querySelector("#canvas");
canvas.style.backgroundColor = "#bfa";
var ctx = canvas.getContext("2d");
// 2 画圆
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(50, 50, 50, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
ctx.closePath();
ctx.fill();
// 3 添加点击事件,如果所点击的像素的颜色是红色,则表明点到了该元素上
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
canvas.onclick = function (e) {
e = e || window.e;
let x = e.clientX - canvas.offsetLeft;
let y = e.clientY - canvas.offsetTop;
console.log(x, y);
var color = getPxInfo(imageData, x, y);
var targetColor = [255, 0, 0, 255];
if (color[0] === 255) {
alert("yes");
}
};
// 获取相对于画布原点x,y处的像素点的颜色列表
function getPxInfo(imageData, x, y) {
var color = [];
var data = imageData.data;
var w = imageData.width;
var h = imageData.height;
color[0] = data[(y * w + x) * 4];
color[1] = data[(y * w + x) * 4 + 1];
color[2] = data[(y * w + x) * 4 + 2];
color[3] = data[(y * w + x) * 4 + 3];
return color;
}
};
</script>
</head>
<body>
<canvas id="canvas" width="100px" height="100px"></canvas>
</body>
</html>
方法2:使用ctx.isPointInPath(x, y)
不使用像素的方法判断,使用canvas提供了ctx.isPointInPath(x, y)
判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
margin: 100px 0 0 200px;
}
</style>
<script>
window.onload = function () {
// 1 获取画笔
var canvas = document.querySelector("#canvas");
canvas.style.backgroundColor = "#bfa";
var ctx = canvas.getContext("2d");
// 2 画圆
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(50, 50, 50, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
ctx.closePath();
ctx.fill();
// 3 添加点击事件,如果所点击点在当前路径中,则表明点击到了该圆上
canvas.onclick = function (e) {
e = e || window.e;
let x = e.clientX - canvas.offsetLeft;
let y = e.clientY - canvas.offsetTop;
if (ctx.isPointInPath(x, y)) {
alert("yes");
}
};
};
</script>
</head>
<body>
<canvas id="canvas" width="100px" height="100px"></canvas>
</body>
</html>
还有一个方法参考:这里,使用html实现