CODEWITHSUNDEEP
javascripthtmlcanvas
Duck
Duck

Reputation: 35953

HTML5 - frame by frame animation not working

I have this frame animation where each frame is called at every 1/30s.

Canvas is simply not being cleared properly. Why?

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<script src="http://code.createjs.com/easeljs-0.4.2.min.js" ></script>
<script src="http://code.createjs.com/tweenjs-0.2.0.min.js" ></script>

<script>
var canvas;
var stage;
var screen_width;
var screen_height;
var bmpAnimation;

// this is a list of keyframes for each image parameter to be animated
var beachX = new Array(102,130,140,200, 233, 211, 133, 455,222);
var beachY = new Array(52,120,240,400, 102,130,140,200, 233);
var beachRotation = new Array(102,30,140,200, 33, 211, 133, 355,222);
var beachOpacity = new Array(0, 0.5, 1, 0.3, 0.8, 0.3, 0.9, 0.3, 1);
var beachScaleX = new Array(0, 0.5, 0.7, 0.3, 0.8, 1, 0.9, 0.2, 1);
var beachScaleY = new Array(0.3, 0, 0.5, 0.7, 0.3, 0.8, 1, 0.9, 1);


var index = 0;

var beach;


var context;
var interval;

window.onload = init;




function make_beach()
{
  beach = new Image();
  beach.src = "beach.png"; // this can be any image that is large (at least 600 x 600 pixels)
  beach.onload = function(){
    context.drawImage(beach, 70,120);
  }
}




function init() {
        canvas = document.getElementById("myCanvas");
    context = canvas.getContext('2d');
    context.save();

    make_beach();

    interval = setInterval("tick()",33);

    stage = new Stage(canvas);

}



function degreesToRadians(num) {
    return num * 0.0174532925199432957;
}



function tick() {

    var numberOfFrames = beachX.length;
    if (index > (numberOfFrames -1)) {
            clearInterval (interval); // cancel the timer
        return;
    }

    context.restore();

    context.globalAlpha = 1;
    context.clearRect(0, 0, canvas.width, canvas.height);


    var beachMiddleX = beach.width * 0.5;
    var beachMiddleY = beach.height * 0.5;
    context.translate(beachX[index] + beachMiddleX, beachY[index] + beachMiddleY);
    context.scale(beachScaleX[index], beachScaleY[index]);
    context.rotate(degreesToRadians(beachRotation[index]));
    context.globalAlpha = beachOpacity[index];
    context.translate(-beachMiddleX, -beachMiddleY);
    context.drawImage(beach, beachX[index], beachY[index]);
    context.restore();

    index ++;
}

</script>
</head>

<body>
<div class="description">

    </div>
    <div class="canvasHolder">
        <canvas id="myCanvas" width="1024" height="768" style="background-color:#FFFFFF">
            Your browser doesn't support canvas. Please download a modern browser 
        </canvas>
    </div>
</body>
</html>

Upvotes: 0

Views: 282

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

Well the first thing that looks extremely weird is that you have a single call to context.save in your init function, with no matching call to restore. This is bad.

Then in your tick function you have two calls to restore!

So your program is doing save once, then restore a million times. Whatever you're trying to do that is certainly not what you want.

Here is your code with that fixed and the timer slowed down a lot. It seems to do something, though I don't know what your intent is here so its hard to say if its what you want or not:

http://jsfiddle.net/simonsarris/LJQpM/

Upvotes: 1

Related Questions