HTML5 Canvas图像移动像素化

Question

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

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

这是我的Fiddle Project

Answer 1

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

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

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

Updated fiddle，快速修复。

Answer 2

非常有趣的话题。运动也很好。我选了你的小提琴。

结果如下：

https://jsfiddle.net/dh6y18yh/8/

var loopRunner = function() {
      drawImage();
        globalID = requestAnimationFrame(loopRunner);
};

基本上主要的区别在于，我将图像定位的所有参数分离为变量。然后在drawImage（）中进行translate（x，y） 让drawImage（）在window.requestAnimationFrame（）循环中运行。

这种方式以60 fps正确呈现。

鼠标拖动现在计算拖动的距离，并将此值设置为位置值。