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();
   }
}

編集：

そして、animate33msごとに関数を呼び出します:

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

オブジェクトを使用して、このコードをより 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);
  }
}
于 2012-07-20T12:54:55.367 に答える