CODEWITHSUNDEEP
javascripthtmlcanvas
Brian
Brian

Reputation: 13

can you animate an image on a canvas

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? :)

Upvotes: 0

Views: 1998

Answers (1)

markE
markE

Reputation: 105015

You can animate a spritesheet instead of a .gif.

The sequence is simple:

  1. Clear the canvas,
  2. Draw the next sprite in sequence and position it to advance across the canvas.
  3. Wait a while (perhaps in a requestAnimationFrame loop).
  4. 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>

Upvotes: 1

Related Questions