要让移动后的图像带有擦除的样子，可以在移动事件中记录移动的轨迹，然后将轨迹上的像素点逐一进行绘制，这样就可以在图像移动的同时保留原有的擦除痕迹。

具体实现可以按照以下步骤进行：

1.在移动事件中记录移动轨迹，可以使用一个数组来存储每个移动事件的坐标点。

2.在移动事件中获取需要擦除的区域，可以使用globalCompositeOperation属性设置为destination-out来实现橡皮擦功能。

3.在移动事件结束后，将移动轨迹上的像素点逐一进行绘制，可以使用putImageData()方法将像素点重新绘制到画布上，这样就可以保留原有的擦除痕迹。

示例代码如下：

javascript

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

let isDragging = false;
let lastX, lastY;
let erasedPoints = [];

// 渲染图像
const img = new Image();
img.src = 'image.png';
img.onload = () => {
ctx.drawImage(img, 0, 0);
};

// 监听鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
if (!isDragging) {
return;
}

const x = e.clientX - canvas.offsetLeft;
const y = e.clientY - canvas.offsetTop;

// 记录移动轨迹
erasedPoints.push({ x, y });

// 擦除图像
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();

lastX = x;
lastY = y;
});

// 监听鼠标按下事件
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
lastX = e.clientX - canvas.offsetLeft;
lastY = e.clientY - canvas.offsetTop;
});

// 监听鼠标松开事件
canvas.addEventListener('mouseup', () => {
isDragging = false;

// 将移动轨迹上的像素点重新绘制到画布上
for (let i = 0; i < erasedPoints.length; i++) {
const point = erasedPoints[i];
const imageData = ctx.getImageData(point.x - 10, point.y - 10, 20, 20);
ctx.putImageData(imageData, point.x - 10, point.y - 10);
}

// 清空移动轨迹数组
erasedPoints = [];
});
在上述代码中，首先通过drawImage()方法渲染了一张图像。然后，监听了鼠标移动事件，在移动事件中记录了移动轨迹，并擦除了图像。最后，在鼠标松开事件中，将移动轨迹上的像素点重新绘制到画布上，