javascript - 我如何处理我的 HTML5 Canvas 中的许多图像？

Question

我对 Html5 canvas 和 Javascript 还很陌生。我正在尝试这个:

function animate() {    
   var image1 = new Image();
   image.src = /path
   var image2 = new Image();
   image2.src = /path
   for(;;)
   {
        //change value of x and y so that it looks like moving
        context.beginPath();
        context.drawImage(<image>, x, y );
        context.closePath();
        context.fill();
   }
}

编辑:

我每 33 毫秒调用一次 animate 函数:

if (playAnimation) {
            // Run the animation loop again in 33 milliseconds
            setTimeout(animate, 33);
        };

如果我按照此处给出的答案进行操作，我会得到图像被击中并且它不再移动了。

Answer 1

更新:根据问题中的新信息，您的问题(重述)是您想要要么

1. 首先等待所有图像加载，然后开始用它们制作动画，或者
2. 开始制作动画并仅使用可用的图像。

两者都在下面描述。

1。加载多张图片，加载完毕才继续

使用这种技术，我们会立即加载所有图像，并在最后一个图像加载后运行自定义回调。

演示:http://jsfiddle.net/3MPrT/1/

// Load images and run the whenLoaded callback when all have loaded;
// The callback is passed an array of loaded Image objects.
function loadImages(paths,whenLoaded){
  var imgs=[];
  paths.forEach(function(path){
    var img = new Image;
    img.onload = function(){
      imgs.push(img);
      if (imgs.length==paths.length) whenLoaded(imgs);
    }
    img.src = path;
  });
}

var imagePaths = [...]; // array of strings
loadImages(imagePaths,function(loadedImages){
  setInterval(function(){ animateInCircle(loadedImages) }, 30);
});

2。跟踪到目前为止加载的所有图像

使用这种技术，我们可以立即开始制作动画，但只在图像加载后绘制图像。我们的圈子会根据目前加载的图像数量动态改变尺寸。

演示:http://jsfiddle.net/3MPrT/2/

var imagePaths = [...]; // array of strings
var loadedImages = [];  // array of Image objects loaded so far

imagePaths.forEach(function(path){
  // When an image has loaded, add it to the array of loaded images
  var img = new Image;
  img.onload = function(){ loadedImages.push(img); }
  img.src = path;
});

setInterval(function(){
  // Only animate the images loaded so far
  animateInCircle(loadedImages);
}, 100);

而且，如果您希望图像绕着圆圈旋转而不只是绕着圆圈移动:

旋转图像:http://jsfiddle.net/3MPrT/7/

ctx.save();
ctx.translate(cx,cy); // Center of circle
ctx.rotate( (angleOffset+(new Date)/3000) % Math.TAU );
ctx.translate(radius-img.width/2,-img.height/2);
ctx.drawImage(img,0,0);
ctx.restore();

---

原始答案如下。

通常，您必须等待每个图像加载完成:

function animate(){
  var img1 = new Image;
  img1.onload = function(){
    context.drawImage(img1,x1,y1);
  };
  img1.src = "/path";

  var img2 = new Image;
  img2.onload = function(){
    context.drawImage(img2,x2,y2);
  };
  img2.src = "/path";
}

您可能希望通过使用一个对象使此代码更加 DRY:

var imgLocs = {
  "/path1" : { x:17, y:42  },
  "/path2" : { x:99, y:131 },
  // as many as you want
};

function animate(){
  for (var path in imgLocs){
    (function(imgPath){
      var xy = imgLocs[imgPath];
      var img = new Image;
      img.onload = function(){
        context.drawImage( img, xy.x, xy.y );
      }
      img.src = imgPath;
    })(path);
  }
}