Fatal编程技术网
  • javascript/
  • Javascript HTML5-逐帧动画不工作

Javascript HTML5-逐帧动画不工作

javascript html canvas

Javascript HTML5-逐帧动画不工作,javascript,html,canvas,Javascript,Html,Canvas,我有一个帧动画，每1/30秒调用一帧 画布没有被正确地清除。为什么? 代码如下： <!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.m

我有一个帧动画，每1/30秒调用一帧

画布没有被正确地清除。为什么?

代码如下：

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


var帆布；
var期；
屏幕宽度；
屏幕高度；
var bmpAnimation；
//这是要设置动画的每个图像参数的关键帧列表
var beachX=新阵列（102130140200233211133455222）；
var beachY=新阵列（52120240400102130140200233）；
var beachRotation=新数组（102,30140200,3321113355222）；
var beacopacity=新数组（0,0.5,1,0.3,0.8,0.3,0.9,0.3,1）；
var beachScaleX=新阵列（0,0.5,0.7,0.3,0.8,1,0.9,0.2,1）；
var beachScaleY=新阵列（0.3,0,0.5,0.7,0.3,0.8,1,0.9,1）；
var指数=0；
瓦尔海滩；
var语境；
var区间；
window.onload=init；
函数make_beach（）
{
海滩=新图像（）；
beach.src=“beach.png”；//这可以是任何大的图像（至少600 x 600像素）
beach.onload=函数（）{
背景：drawImage（海滩，70120）；
}
}
函数init（）{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（'2d'）；
context.save（）；
使之成为海滩（）；
间隔=设置间隔（“勾选（）”，33）；
阶段=新阶段（画布）；
}
函数度弧度（num）{
返回数*0.0174532925199432957；
}
函数tick（）{
var numberOfFrames=beachX.length；
如果（索引>（帧数-1））{
clearInterval（interval）；//取消计时器
返回；
}
restore（）；
context.globalAlpha=1；
clearRect（0，0，canvas.width，canvas.height）；
var beachMiddleX=海滩宽度*0.5；
var beachMiddleY=海滩高度*0.5；
translate（beachX[index]+beachMiddleX，beachY[index]+beachMiddleY）；
比例尺（beachScaleX[index]，beachScaleY[index]）；
旋转（度弧度（beachRotation[索引]）；
context.globalAlpha=beacopacity[index]；
translate（-beachMiddleX，-beachMiddleY）；
drawImage（beach，beachX[index]，beachY[index]）；
restore（）；
索引++；
}
您的浏览器不支持画布。请下载现代浏览器
第一件看起来非常奇怪的事情是，您只有一个对
上下文的调用。在init函数中保存
，而没有对
还原的匹配调用。这很糟糕

然后在
勾选
函数中，您有两个调用
还原

所以你的程序只保存一次，然后恢复一百万次。不管你想做什么，那肯定不是你想要的

这是你的代码，它是固定的，计时器慢了很多。它似乎做了些什么，虽然我不知道你的意图是什么，所以很难说你到底想要什么：


ahhhhh，这就是问题所在：保存和恢复内容。我不是javascript方面的专家，我认为保存就像将状态存储在一种可以恢复n次的变量上。事实上，保存只能恢复一次。谢谢它现在运行良好！！！！！！