0

各フレームが 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>
4

1 に答える 1

1

非常に奇妙に見える最初のことはcontext.save、init 関数で への呼び出しが 1 つしかなく、対応する への呼び出しがないことrestoreです。これは悪いです。

次に、関数内に!tickへの 2 つの呼び出しがあります。restore

したがって、プログラムは一度保存してから、何百万回も復元します。あなたがしようとしていることは何であれ、それは確かにあなたが望むものではありません.

これが修正されたコードで、タイマーが大幅に遅くなりました。何かをしているようですが、あなたの意図がここにあるのかどうかはわかりませんので、それがあなたが望むものかどうかを言うのは難しいです:

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

于 2012-07-14T19:15:49.300 に答える