js实现图片擦除
实现图片擦除效果
使用JavaScript实现图片擦除效果可以通过Canvas API完成。以下是实现方法：
创建Canvas元素 在HTML中添加Canvas元素，并设置合适的宽度和高度：
<canvas id="eraseCanvas" width="500" height="500"></canvas>初始化Canvas上下文 获取Canvas元素并设置绘图上下文：
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);
};实现擦除功能 通过监听鼠标事件来实现擦除效果：
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);
});以上代码实现了基本的图片擦除功能，可以根据需要调整擦除区域大小、形状和交互方式。
