当前位置：首页 > JavaScript

js实现图片擦除

2026-03-15 22:52:58JavaScript

实现图片擦除效果

使用JavaScript实现图片擦除效果可以通过Canvas API完成。以下是实现方法：

创建Canvas元素 在HTML中添加Canvas元素，并设置合适的宽度和高度：

<canvas id="eraseCanvas" width="500" height="500"></canvas>

初始化Canvas上下文 获取Canvas元素并设置绘图上下文：

js实现图片擦除

const canvas = document.getElementById('eraseCanvas');
const ctx = canvas.getContext('2d');

加载背景图片 首先需要加载一张背景图片到Canvas上：

const img = new Image();
img.src = 'your-image.jpg';
img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

实现擦除功能 通过监听鼠标事件来实现擦除效果：

js实现图片擦除

let isDrawing = false;

canvas.addEventListener('mousedown', startErasing);
canvas.addEventListener('mousemove', erase);
canvas.addEventListener('mouseup', stopErasing);

function startErasing(e) {
    isDrawing = true;
    erase(e);
}

function erase(e) {
    if(!isDrawing) return;

    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 设置擦除区域为透明
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fill();

    // 恢复默认绘图模式
    ctx.globalCompositeOperation = 'source-over';
}

function stopErasing() {
    isDrawing = false;
}

触摸屏支持

为了支持移动设备，需要添加触摸事件处理：

canvas.addEventListener('touchstart', function(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousedown', {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
});

canvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
});

canvas.addEventListener('touchend', function(e) {
    e.preventDefault();
    const mouseEvent = new MouseEvent('mouseup');
    canvas.dispatchEvent(mouseEvent);
});

优化擦除效果

可以调整擦除区域的形状和大小：

// 使用矩形擦除区域
ctx.fillRect(x - 10, y - 10, 20, 20);

// 或者使用自定义形状
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + 15, y + 10);
ctx.lineTo(x + 5, y + 20);
ctx.closePath();
ctx.fill();

重置擦除效果

添加重置按钮可以清除所有擦除效果：

document.getElementById('resetBtn').addEventListener('click', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
});

以上代码实现了基本的图片擦除功能，可以根据需要调整擦除区域大小、形状和交互方式。