HTML HTML5 Canvas橡皮擦

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

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。