如何处理HTML5画布中的许多图像？ [英] How do I handle many images in my HTML5 canvas?

问题描述

我是Html5画布和Javascript的新手。我正在尝试这个：

I'm very new to Html5 canvas and Javascript. I'm trying this :

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

编辑：

我每33ms调用 animate 函数：

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

如果我按照这里给出的答案，我会得到图像被击中和它没有进一步移动。

If I follow the answer given here, I get the image struck and its not moving any further.

推荐答案

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

Update: Based on new information in the question, your problem (restated) is that you want to either

1. 等待所有图像先加载，然后开始制作动画与他们一起，或


2. 开始制作动画并仅使用图片（如果可用）。

1. wait for all images to load first, and then start animating with them, or
2. start animating and only use an image if it is available.

两者都描述如下。

使用此技术，我们立即加载所有图像，当最后一个加载时，我们运行自定义回调。

With this technique we load all images immediately and when the last has loaded we run a custom callback.

// 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。跟踪到目前为止加载的所有图像

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

2. Keeping track of all images loaded so far

With this technique we start animating immediately, but only draw images once they are loaded. Our circle dynamically changes dimension based on how many images are loaded so far.

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

并且，如果您希望图像以圆圈旋转而不是仅仅移动圈子：

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

---

原始答案如下。

一般情况下，您必须等待每个图像加载完成：

In general, you must wait for each image loading to complete:

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

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

You may want to make this code more DRY by using an object:

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

这篇关于如何处理HTML5画布中的许多图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！