<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container" style="width: 100%; height: 600px; position: relative">
<canvas id="canvas" width="300" height="200"></canvas>
<img id="cover" src="./Images/2.jpeg" alt="cover" width="300" height="200" style="position: absolute; left: 0; z-index: -1;">
</div>
</body>
<script>
const canvas = document.getElementById("canvas");
const coverCtx = canvas.getContext("2d");
const image = new Image();
image.src = "./Images/1.jpeg";
image.onload = function() {
coverCtx.drawImage(image, 0, 0, canvas.width, canvas.height);
};
let isMouseDown = false;
const clearArea = (x, y) => {
coverCtx.save();
coverCtx.beginPath();
coverCtx.arc(x, y, 20, 0, Math.PI*2);
coverCtx.clip();
coverCtx.clearRect(x-20, y-20, 100, 100);
coverCtx.restore();
};
canvas.addEventListener("mousedown", (e) => {
isMouseDown = true;
clearArea(e.offsetX, e.offsetY);
});
canvas.addEventListener("mousemove", (e) => {
if(isMouseDown) {
clearArea(e.offsetX, e.offsetY);
}
});
canvas.addEventListener("mouseup", () => {
isMouseDown = false;
});
</script>
</html>Canvas刮刮乐效果
最新推荐文章于 2025-01-26 22:56:14 发布
扫一扫
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
