HTML5 - 逐帧动画不起作用

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

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

下面是代码：

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

来源

2012-07-14 SpaceDog

嗯，这看起来非常奇怪的第一件事是，你必须context.save一个呼叫你的初始化函数，没有相应地调用restore。这不好。

然后在您的tick函数中，您有两个调用restore！

因此，您的程序正在保存一次，然后恢复一百万次。无论你想要做什么，这当然不是你想要的。

这是你的代码与固定和计时器减慢了很多。这似乎做一些事情，虽然我不知道你的意图是什么这里，所以它很难或者说，如果你想要的东西不是：

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

来源

2012-07-14 19:15:49

ahhhhhhh，这就是问题所在：在保存和恢复的东西。我不是javascript的专家，我认为保存就像将状态存储在一种可以恢复n次的变量上。实际上，保存只能恢复一次。谢谢。它现在工作正常!!!!!! – SpaceDog 2012-07-14 19:57:41

HTML5 - 逐帧动画不起作用

回答

相关问题