你能在画布上为图像制作动画吗

Question

由于我刚开始学习 html 和 javascript，我想知道您是否可以在画布上并排放置动态图像？如果是这样，请问怎么做？？？

这是我目前要做的。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ann.css" />

<script>
 window.onload = animate;

 var canvas=document.getElementById('mycanvas');
 var ctx=canvas.getContext('2d');

 function animate()
 {
 window.setInterval(slide,1000);
 }



 function slide()
 {
 var obj = document.getElementById("ball");
 var left = obj.style.left;
 if(left === ''){
    left = 0;
 }
 var wartosc = parseInt(left, 10);
 obj.style.left = (wartosc + 10) + "px";
 }

function Loop() {
if (left>canvas.width){
    var right = obj.style.right;
 if(right === ''){
    right = 0;
 }
 var wartosc = parseInt(right, 10);
 obj.style.right = (wartosc + 10) + "px";

 }
 </script>

 <style>
 #ball
 {
    position: relative;
    left: 1px;
 }
 #mycanvas {border:1px solid #000000}
 </style>
 </head>

 <body>
  <img src="ball.gif" id="ball" alt="Usmiech" width="30" height="30" />


  <canvas id=mycanvas width=600 height=50>Canvas Not Supported
  </canvas>

<body>
</html>

我想要它做的是将图像包含在画布内并从左到右移动，当到达画布的右侧时继续向左返回等等。

但是我的问题是如果可以做到，我不知道如何将图像放在画布上，然后一旦图像到达画布末端，我就无法使图像向右移动。我认为问题在于我的循环函数，它试图让它向右移动。

正如您从小提琴链接中看到的那样，当我删除循环功能代码时，它可以工作。但是它只会向左移动。

http://jsfiddle.net/eCSb4/18/

请问有人可以帮我解决吗？ :)

Answer 1

您可以为 spritesheet 设置动画，而不是 .gif。

顺序很简单：

1. 清除画布，
2. 按顺序绘制下一个精灵并将其放置在画布上前进。
3. 稍等片刻（可能在 requestAnimationFrame 循环中）。
4. 重复 #1。

这是带注释的代码和一个演示：

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

// timing related vars
var nextTime=0;
var spriteCount=7;
var interval=700/spriteCount;
// sprite related vars
var sIndex=0;
var sw=60;
var sh=95;
var animationOn=true;

// current x,y position of sprite
var x=100;
var y=100;

// load the spritesheet
var ss=new Image();
ss.onload=start;
ss.src="http://i59.tinypic.com/jpkk6f.jpg";
function start(){

  // draw the first sprite
  ctx.drawImage(ss,sIndex*sw,0,sw,sh,x,y,sw,sh);

  // start the animation loop
  requestAnimationFrame(animate);

}

function animate(time){
  // wait for the specified interval before drawing anything
  if(time<nextTime || !animationOn){requestAnimationFrame(animate); return;}
  nextTime=time+interval;
  // draw the new sprite
  ctx.clearRect(0,0,cw,ch);
  ctx.drawImage(ss,sIndex*sw,0,sw,sh,x,y,sw,sh);
  // get the next sprite in sequence
  if(++sIndex>=spriteCount){sIndex=0;}
  // advance the sprite rightward
  x+=5;
  if(x>cw){x=-sw-10;}
  // request another animation loop
  requestAnimationFrame(animate);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

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