HTML5 Canvas是一个强大的图形处理工具，可以用来绘制各种图形，橡皮擦功能可以通过监听鼠标事件来实现，当用户在画布上点击时，将该像素的颜色设置为透明，从而实现橡皮擦的效果。
（图片来源网络，侵删）
以下是一个简单的HTML5 Canvas橡皮擦实现：
1、创建一个HTML文件，添加一个<canvas>元素和一个<button>元素，用于切换橡皮擦和画笔功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>HTML5 Canvas 橡皮擦</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000;"></canvas>
<button id="eraserBtn">橡皮擦</button>
<script src="script.js"></script>
</body>
</html>
2、创建一个JavaScript文件（script.js），编写以下代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const eraserBtn = document.getElementById('eraserBtn');
let isErasing = false;
// 初始化画布背景颜色
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 监听鼠标按下事件
canvas.addEventListener('mousedown', (e) => {
isErasing = true;
});
// 监听鼠标抬起事件
canvas.addEventListener('mouseup', () => {
isErasing = false;
});
// 监听鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
if (isErasing) {
const x = e.clientX canvas.offsetLeft;
const y = e.clientY canvas.offsetTop;
ctx.clearRect(x 1, y 1, 3, 3);
} else {
// 画笔功能
ctx.beginPath();
ctx.arc(e.clientX canvas.offsetLeft, e.clientY canvas.offsetTop, 5, 0, Math.PI * 2);
ctx.fillStyle = '#000';
ctx.fill();
}
});
// 监听按钮点击事件，切换橡皮擦和画笔功能
eraserBtn.addEventListener('click', () => {
isErasing = !isErasing;
eraserBtn.innerText = isErasing ? '橡皮擦' : '画笔';
});
这个示例中，我们首先获取了<canvas>元素和<button>元素，然后设置了画布的背景颜色，接着，我们监听了鼠标的按下、抬起和移动事件，实现了橡皮擦和画笔功能，我们监听了按钮的点击事件，用于切换橡皮擦和画笔功能。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477065.html
微信扫一扫