HTMLHTML5Canvas橡皮擦

HTML5 Canvas是一个强大的图形处理工具，可以用来绘制各种图形，橡皮擦功能可以通过监听鼠标事件来实现，当用户在画布上点击时，将该像素的颜色设置为透明，从而实现橡皮擦的效果。

创新互联公司是一家以重庆网站建设公司、网页设计、品牌设计、软件运维、seo优化、小程序App开发等移动开发为一体互联网公司。已累计为生料搅拌车等众行业中小客户提供优质的互联网建站和软件开发服务。

以下是一个简单的HTML5 Canvas橡皮擦实现：

1、创建一个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 ? '橡皮擦' : '画笔';
});

这个示例中，我们首先获取了元素和

网站建设知识

HTMLHTML5Canvas橡皮擦

其他资讯