上下文旋轉后為什么圖像質量下降？

Question

我正在制作一個自上而下的射擊游戲，依賴於頭像始終旋轉指向鼠標光標。 我像這樣實現輪換：

//Rendering.
context.save(); //Save the context state, we're about to change it a lot.

context.translate(position[0] + picture.width/2, position[1] + picture.height/2); //Translate the context to the center of the image.
context.rotate(phi); //Rotate the context by the object's phi.
context.drawImage(picture.image, -picture.width/2, -picture.height/2); //Draw the image at the appropriate position (center of the image = [0, 0]).

context.restore(); //Get the state back.

當phi為零時，圖像以其正常質量渲染，具有銳邊和可檢測像素。 但是，當我將phi設置為非零值時（實際上，當它不是0 ， Pi/2 ， Pi ， Pi+Pi/2或2Pi ），圖像會失去它的清晰度，並且不再能看到單個像素，因為他們模糊了

這是一個截圖（抱歉屏幕截圖的一般質量不好，但我認為差異非常明顯）：

這有點令人無法接受。 我不能讓圖像總是模糊不清！ 為什么會這樣，我能解決嗎？

Answer 1

你可以試試

context.imageSmoothingEnabled = false;

查看文檔 ：

context.imageSmoothingEnabled [= value]

返回模式填充和drawImage（）方法是否會嘗試平滑圖像，如果它們必須重新縮放它們（而不是僅使用“大像素”渲染圖像）。

可以設置，以更改圖像是否平滑（true）與否（false）。

如果你想要一個真正的像素藝術復古風格效果，你需要手動創建幾個角度的旋轉精靈圖像，查找適當的精靈為phi的當前值，並繪制它而不旋轉。 這顯然需要大量的藝術作品！

Answer 2

如果圍繞中心點旋轉圖像，請確保圖像本身具有偶數個像素。 一旦最終得到奇數坐標，就需要為目標畫布插入圖像數據。 Apple 在翻譯和旋轉畫布方面有一些很好的文檔 。

因此，對於任何圖像，如上所述，使用舍入來捕捉到全像素。

context.translate(Math.floor(img.width/2), Math.floor(img.height/2));

這樣，圖像的每個源像素將始終精確地繪制到畫布內的像素中，並且不會出現模糊。 然而，這僅適用於90度的倍數。

似乎所有瀏覽器在某種程度上都在圖像繪制中進行抗鋸齒處理，因此您可能必須提供旋轉圖像作為精靈。

根據這個Chromium bug報告 ，如果他們尚未修復它，你可能會很幸運。 閱讀並了解Ian Hickson可能會反對將抗鋸齒圖像繪制作為可選項。

Answer 3

(picture.width/2, picture.height/2)點並不總是有效。

(Math.floor(picture.width/2) + 0.5, Math.floor(picture.height/2) + 0.5)應該有幫助。

Answer 4

嗯，實際上這是你無法解決的問題

如果將圖像旋轉90度的倍數，則庫應足夠智能，以便不應用插值。

但是，只要將圖像旋轉不同於90度的倍數的角度，就需要進行插值。 結果，你得到了平滑。 如果您對該理論感興趣，可以查找有關計算機圖形或圖像處理的書籍。

對於圖像旋轉的具體情況，您可以查看本文， http：//bigwww.epfl.ch/publications/unser9502.html