Question

我有这个帧动画，每隔1/30调用一帧。

Canvas无法正常清除。为什么呢？

以下是代码：

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

Answer 1

首先看起来非常奇怪的是你在init函数中只有一次context.save调用，没有与restore的匹配调用。这很糟糕。

然后在tick功能中，您有两次拨打restore！

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

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

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

HTML5 - 逐帧动画无法正常工作

1 个答案: