Javascript 绘制多幅图像'；在画布上旋转每个图像

我是HTML5编程新手，我想知道如何在将每个图像添加到画布时旋转它们。是否应该将它们中的每一个放置在画布中，然后旋转？如果是这样，我如何将多个画布添加到单个画布上下文中

小提琴：

代码

---

在您的评论中，您提到您了解

上下文。旋转

，但您不希望上下文保持旋转。那根本不是问题。首先，调用

context.rotate

只会影响随后绘制的内容。以前画的任何东西都会保留下来。第二，它可以很容易地逆转后绘制

用于创建所有当前上下文设置（包括当前旋转）的快照

使用并绘制您的图像。角度在。这意味着一个完整的360°圆是

Math.PI*2

。图像将围绕的点是画布的当前原点（0:0）。要围绕图像中心旋转图像时，请使用将原点设置为图像中心所在的位置，然后旋转，然后在坐标

-img.width/2，-img.height/2处绘制图像

用于返回快照。旋转和平移现在将与以前一样

下面是一个示例函数，该函数在坐标100100处绘制旋转45°的图像：

function drawRotated(image, context) {
    context.save();
    context.translate(100, 100);
    context.rotate(Math.PI / 4);
    context.drawImage(image, -image.width / 2, -image.height / 2);
    context.restore();
}

---

尝试此链接：如果只有一个图像的整个画布上下文被旋转，则此链接将起作用。当您希望多个图像以不同角度旋转时，这将如何工作？将函数签名更改为drawRotated（上下文、img、x、y、角度），这应该是答案。（可能在CanvasRenderingContext2D的原型上设置此方法…？）@GameAlchematic将字段添加到您未编写的对象或原型中可能会很危险，因为存在覆盖已存在字段的风险。

function drawRotated(image, context) {
    context.save();
    context.translate(100, 100);
    context.rotate(Math.PI / 4);
    context.drawImage(image, -image.width / 2, -image.height / 2);
    context.restore();
}