2

我对 Html5 画布和 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();
   }
}

编辑：

我animate每 33ms 调用一次函数：

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

如果我按照这里给出的答案，我会得到图像，并且不会进一步移动。

4

1 回答 1

9

更新：根据问题中的新信息，您的问题（重述）是您想要

  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";
}

您可能希望通过使用对象使此代码更加干燥：

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);
  }
}
于 2012-07-20T12:54:55.367 回答