can you animate an image on a canvas

Question

since I'm learning new to html and javascript, I was wondering if you can place an moving image side to side on a canvas? If so how can this be done please???

Here's what I've to do so far.

<!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>

What I want it do to is for the image to be contained inside the canvas and to move left to right and when reached the right side of canvas to go back left and so on continuously.

However my problems are if can be done, I don't know how I can put the image on the canvas and then I can't make the image move to the right once it has reached the end off the canvas. I think the issue is my loop function, which is there to try to make it go to the right.

As you can see from the fiddle link, when I remove the loop function code it works. However it will only goes to the left.

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

Please can someone help me fix it? :)

Answer 1

You can animate a spritesheet instead of a .gif .

The sequence is simple:

Clear the canvas,
Draw the next sprite in sequence and position it to advance across the canvas.
Wait a while (perhaps in a requestAnimationFrame loop).
Repeat #1.

Here's annotated code and a Demo:

 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>

can you animate an image on a canvas

Question

1 answers

solution1
1 2015-12-15 04:09:15

can you animate an image on a canvas

Question

1 answers

solution1 1 2015-12-15 04:09:15

solution1
1 2015-12-15 04:09:15