HTML5-逐帧动画不起作用

HTML5 - frame by frame animation not working

本文关键字：不起作用 动画 HTML5-      更新时间：2023-09-26

我有一个帧动画，其中每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>

首先看起来非常奇怪的是，在init函数中只有一个对context.save的调用，而没有对restore的匹配调用。这太糟糕了。

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

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

这是你的代码，修复了它，计时器慢了很多。它似乎做了一些事情，尽管我不知道你在这里的意图是什么，所以很难说这是否是你想要的：

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

相关文章：