canvas drawImage 连续调用绘制图片重影

Question

需求

用canvas实现图片裁剪功能

思路

用两个canvas,一个用来绘制图片，一个用来绘制裁剪框，实现裁剪功能，在移动裁剪框的时候，执行drawImage，给裁剪框画入对应位置的图片数据， 因为存在水印等其他功能，裁剪框现在只能使用canvas实现

问题

移动鼠标事件触发，drawImage事件执行，但画入的图片却糊了，并且在执行一定次数后，就不再画图了，如下图

请问问题产生的原因，和解决方案！

Answer 1

这种情况一般是由于 canvas 的绘制机制导致的。canvas 绘制时默认采用 2D 渲染上下文，每次调用 drawImage 方法时，都会在画布上绘制一次图像，而不是替换原来的图像。如果连续绘制同一图像，则会产生重影。

为了避免这种情况，可以在每次绘制前清空画布。可以使用 clearRect() 方法清除指定矩形内的像素，从而实现清空画布的效果。例如：

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, x, y, width, height, 0, 0, canvas.width, canvas.height);

在绘制图片前，先清除画布，然后再绘制新的图像。这样就能避免连续绘制同一图像产生的重影问题。