html5怎么设置逐帧动画,HTML5 - 逐帧动画不起作用

我有这个帧动画，其中每个帧在每1/30s被调用。HTML5 - 逐帧动画不起作用

画布根本没有被正确清除。为什么？

下面是代码：

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 ++;

}

Your browser doesn't support canvas. Please download a modern browser

2012-07-14

SpaceDog