如何旋转图像 - 画布像素操作？

Question

我使用getImageData和putImageData在缓冲画布上绘制画布。我使用这些方法，因为我有大量的粒子，这些被证明可以提供最佳性能。 现在我想添加粒子的旋转，但我遇到了问题。 这是一个使用变换矩阵进行旋转的jsfiddle。正如你在图片（或小提琴）中看到的那样，在得到的图像中有一些洞，我希望使用这个矩阵。

nx = ~~ (xx * Math.cos(angle) + yy * Math.sin(angle) + cx);
ny = ~~ (xx * Math.sin(angle) - yy * Math.cos(angle) + cy);

但我不知道如何做得更好，特别是当我看到性能有效的解决方案时？

jsfiddle demo

图像 - 旋转后的正方形（正方形用作简单的正文）：

目前我的备份是程序生成的精灵动画，它是事先用标准画布状态准备的：save - ＆gt;翻译 - ＆gt;旋转 - ＆gt;恢复。

非常感谢你给我的任何指示。

Answer 1

问题在于您尝试将单个像素映射到单个像素。旋转图像时，原始图像中的每个像素都会影响新图像中的任何周围像素。您有效地将每个像素的左上角映射到新图像中的位置，但是您需要将每个像素的中心映射到它在新图像中的位置，然后检查其重叠使用该位置旋转像素，以及新图像中的8个周围像素。

在这里你可以看到效果。黄点是像素的中心，它们可以找到＆＃34; home＆＃34;像素的位置（即，将放置大部分影响的位置）。然后，您需要确定原始像素（黄点周围的黑框）覆盖的像素（底层蓝/白网格）单元格的百分比。一旦找出了原始位置的影响，就需要针对原始图像中的当前像素对8个周围像素重复该过程。在当前代码中，您使用每个像素的左上角来查找新图像的主像素。你应该使用像素的中心。

由于多次迭代可能会影响同一像素，因此在将其绘制到最终图像之前，您需要计算缓冲区中的变换。对于转换中未被原始图像中的像素完全覆盖的像素，计算出所覆盖的像素的百分比，并使用该百分比来影响Alpha通道。在将像素应用到您考虑到alpha部分的最终图像并与已经存在的内容混合时，您必须小心。