在 timer/delay 上的 canvas 上移动不同的图像

Question

我希望能够在 canvas 上移动一些图像，比如 5/6。图像的位置每次都会明显变化，模拟基本动画。图像将处于定时器/延迟状态，以便它们每秒左右移动一次。有没有我可以创建的功能，这样我就不必为图像一遍又一遍地重复相同的代码。如果预加载图像也很好，但我不确定在预加载后如何操作图像。

如果还有一种使用 requestAnimationFrame 而不是 setTimeout 的方法，那就更好了。

这是我当前的代码：

 window.addEventListener("load", eventWindowLoaded, false);
        function eventWindowLoaded () {

        images = new Array();
        images[0] = "images/1.png";
        images[1] = "images/2.png";
        images[2] = "images/3.png";
        images[3] = "images/4.png";
        images[4] = "images/5.png";

        imageObjs = [];

        for(var i = 0; i <= 4; i++){
            var imageObj = new Image();
            imageObj.src = images[i];
            imageObjs.push(imageObj);
        }       
drawFrame();
}

function drawFrame () { 



        setTimeout(function() {
        image = new Image();
        image.onload = function() {
            ctx.drawImage(imageObjs[0], 0, 0);
        }
        image.src = "images/1.png";
        }, 200);


        setTimeout(function () {
        image2 = new Image();

        image2.onload = function() {
            ctx.drawImage(imageObjs[1], 200, 0);
        };
        image2.src = "images/2.png";
    }, 1000);
}

Answer 1

您表示有兴趣让代码执行以下操作：

预加载所有图像。
在 canvas 中移动图像。
使用动画循环函数使代码不重复。
使用 requestAnimationFrame 而不是 setTimeout 以提高效率。

下面是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var images=[];
images.push({x:20,y:200,moveX:5,maxX:250,delay:100,nextTime:0,url:'https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png'});
images.push({x:20,y:30,moveX:10,maxX:100,delay:500,nextTime:0,url:'https://dl.dropboxusercontent.com/u/139992952/multple/sun.png'});
var imageCount=images.length;
for(var n=0;n<images.length;n++){ 
  var i=images[n];
  i.img=new Image();
  i.img.onload=start;
  i.img.src=i.url;
}
function start(){
  if(--imageCount>0){return;}
  requestAnimationFrame(animate);
}


function animate(time){
  requestAnimationFrame(animate);   
  var needsRedrawing=false;
  for(var n=0;n<images.length;n++){
    var i=images[n];
    if(time>i.nextTime){
      if(i.x+i.moveX<i.maxX){
        i.x+=i.moveX;
        i.nextTime+=i.delay;
        needsRedrawing=true;
      }
    }
  }
  if(needsRedrawing){
    ctx.clearRect(0,0,cw,ch);
    for(var n=0;n<images.length;n++){
      var i=images[n];
      ctx.drawImage(i.img,i.x,i.y);
    }
  }
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

在 timer/delay 上的 canvas 上移动不同的图像

Move different images across a canvas on a timer/delay

html

javascript

animation

canvas

html5-canvas