在画布上绘制多个图像，每个图像旋转

Question

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

小提琴：http : //jsfiddle.net/G7ehG/

代码

function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        image1: 'http://farm3.static.flickr.com/2666/3686946460_0acfa289fa_m.jpg',
        image2: 'http://farm4.static.flickr.com/3611/3686140905_cbf9824a49_m.jpg'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.image1, 100, 30, 200, 137);
        context.drawImage(images.image2, 350, 55, 93, 104);
      });

Answer 1

在您的评论中，您提到您了解context.rotate，但您不希望上下文保持旋转。这根本不是问题。首先，调用context.rotate只影响之后绘制的东西。之前绘制的任何内容都会保留原样。其次，它可以在绘制后轻松反转。

1. 用于context.save()创建所有当前上下文设置的快照，包括当前旋转。
2. 使用context.rotate(angle)并绘制您的图像。角度以弧度为单位。这意味着一个完整的 360° 圆是Math.PI * 2。图像将围绕旋转的点是画布的当前原点 (0:0)。当你想围绕它的中心旋转图像时，使用context.translate(x, y)将原点设置为你想要图像中心的位置，然后旋转，然后在坐标处绘制图像-img.width/ 2, -img.height / 2
3. 用于context.restore()返回到您的快照。旋转和平移现在将像以前一样。

这是一个示例函数，它在坐标 100,100 处绘制旋转 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();
}