javascript - HTML5 Canvas 图像移动像素化

我正在尝试使用HTML5创建一个在线图像编辑器，并在执行图像移动时出现问题。每当我尝试移动，缩放，拖动和旋转时，像素化都会发生。我认为问题是clearRect函数。

function clear() {
    element.clearRect(0, 0, window.innerWidth, window.innerWidth);
}

这是我的Fiddle Project

最佳答案

您正在使用画布上下文的矩阵转换。
这些也适用于clearRect方法。

您需要计算当前转换并将其负值应用于clearRect方法，或者重置转换矩阵。

一种简单的方法是使用setTransform方法和转换矩阵的默认值：ctx.setTransform(1,0,0,1,0,0);

Updated fiddle，具有快速修复功能。