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

我使用getImageData和putImageData从缓冲区画布在画布上绘制。我使用这些方法是因为我有大量的粒子，这些粒子被证明提供了最好的性能。 现在我想增加粒子的旋转，但我有问题。 下面是一个JSFIDLE，它使用转换矩阵进行旋转。正如您在图片（或小提琴）中所看到的，在生成的图像中有一些洞，我有点希望使用这个矩阵

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

但我不知道如何使这更好，特别是当我寻找性能有效的解决方案时

---

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

---

目前，我的备份是按程序生成的精灵动画，该动画使用标准画布状态提前准备：保存->平移->旋转->恢复

---

非常感谢您为我提供的任何指导。

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

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

---

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

…您的图片价值千言万语，回答非常清晰！谢谢你，我也是这样想的，不过，我应该更强调性能是这里的关键。我使用的是2d画布，因此本例中的步数/计算量可以显著减少10000个粒子的动画。但我仍在试图找出一条路，我猜这条路走了一半，另一条路走了一半；-）。无论如何，非常感谢您向我保证这一观点是真正鼓舞士气的方法：-）。如果性能是您最关心的问题，我希望内置功能（保存->转换->旋转->恢复）实际上是最快的，因为内置函数的实现不仅限于javascript，而且可以利用硬件功能。当然，你可以通过一些简单的技巧来提高性能，例如，只允许N个可能的旋转角度，然后将相同的旋转图像粘贴到所有不同的位置。如果你有10000张不同的图片，你必须尝试其他的方法。是的，我实际上在做一些你刚才提到的类似的事情，但是当我使用你提到的画布方法时，我几乎无法通过运动绘制几千个粒子。但是我把你提到的所有东西都放在一起，并把它和其他东西结合起来，希望能成功，但我以前从来没有这样做过，所以我比我想的更容易碰壁：-）。谢谢你，我非常感谢你的建议。我正在快速检查旧项目，但现在我不确定我是如何处理的。我知道我确实决定了一些折衷方案，并在其他领域提升了表现。我认为我使用的其中一件事就是将每个新的程序创建的图像预渲染到它自己的画布中，并使用标准的画布旋转函数来获得该特定对象动画所需的所有帧。Basicallly，我尽可能早地准备了飞镖，同时确保我摧毁了其他不能再利用的人。没关系，我在中间得到了白色/空白的像素，不知道该怎么做，我不能解决我的帆布游戏中的旋转。我建议你简单地使用画布旋转。这是相当有效的，如果你使用硬件加速，你不会感觉到它，除非你进入大量的精灵。不过,，首先，我会检查你是否可以使用一个大画布和save-trans-rot-rest例程获得更好的结果，或者只为你的每个精灵使用几个较小的例程，或者至少为不同大小的图像使用几个单独的画布，然后使用相同的例程将它们旋转到那里，然后从这些画布绘制到主画布中（我认为每张图片的画布产生的效果要快得多）。