HTML5 Canvas圖像移動像素化

Question

我正在嘗試使用HTML5創建在線圖像編輯器，並且在執行圖像移動時出現問題。 每當我嘗試移動，縮放，拖動和旋轉時，像素化都會發生。 我認為問題是clearRect函數。

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

這是我的小提琴項目

Answer 1

您正在使用畫布上下文的矩陣轉換。
這些也適用於clearRect方法。

您需要計算當前轉換並將其負值應用於clearRect方法，或者重置轉換矩陣。

一種簡單的方法是使用setTransform方法和轉換矩陣的默認值： ctx.setTransform(1,0,0,1,0,0);

更新了小提琴 ，並提供快速修復。

Answer 2

非常有趣的話題。 鍛煉也不錯。 我選了你的小提琴。

結果如下：

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

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

基本上，主要的不同是，我將圖像定位的所有參數解耦為變量。 然后在drawImage（）中執行translate（x，y）並讓drawImage（）在window.requestAnimationFrame（）循環中運行。

這種方式可以60 fps正確渲染。

鼠標拖動現在正在計算拖動的距離，並將此值設置為位置值。