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 - 逐幀動畫不起作用

回答

相關問題