上下文旋转后为什么图像质量下降？

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,并绘制它而不旋转.这显然需要大量的艺术作品!