0

html5 を使用してボールをアニメーション化したいのですが、この小さなスクリプトを実装しました。しかし、私はアニメーションを見ることができません..どうすればこれを修正できますか?

<html>
    <head>
        <meta charset="utf-8">
        <script>
            canvas = document.getElementById("canvas");         
            window.onload=function(){
            if (document.createElement("canvas").getContext){
                //alert("browser supports canvas");
                //console.log(document.getElementById("canvas").getContext);
                canvas = document.getElementById("canvas");
                shape = new shapes();
                shape.drawball(canvas,100,"red");




                }
            };


function shapes(){
    this.drawtriangle = function(canvas){
        triangles = new triangle(0,0,0,200,200,200);
        triangles.draw(canvas.getContext('2d'));    
    }

    this.drawball = function(canvas,radius,color) {
        ball = new Ball(radius,color);
        ball.draw(canvas.getContext('2d'),canvas);
    }
}


function coordinates(x1,y1){
    this.x = x1;
    this.y = y1;
}





function angle(angle,speed){
    this.angle = angle;
    this.speed = speed;
}

function Ball(radius,color){
    this.origin = new coordinates(100,100);
    this.radius = (radius === "undefined" ) ? 40 : radius;
    this.color = (color === "undefined") ? red : color;
    this.rotation = 0;
    this.index  = 0;
    this.angles = new angle(0,0.2);
}

Ball.prototype.draw = function(context,canvas){

    context.fillStyle = this.color;
    context.strokeStyle = "blue";
    context.rotate(this.rotation);
    context.beginPath();
        context.arc(this.origin.x,this.origin.y,this.radius,0,(Math.PI*2),true)
    context.closePath();
    context.fill();
    context.stroke();
    this.animate(context,canvas);
}

Ball.prototype.animate = function(context,canvas){
        if (this.angles.angle < 1){
context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        window.requestAnimationFrame(this.draw(context));



    }
}


        </script>
        <style>

            body {
                background-color: #bbb;
                }       
            #canvas {
                background-color: #fff;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="1000px" height="1000px">
            Your browser dows bot suppoet canvas

        </canvas>


    </body>
</html>
4

1 に答える 1

1

への呼び出しrequestAnimationFrame()はコールバックを渡していません。関数を実行し、未定義の戻り値を渡しています。これを変更することをお勧めします：

Ball.prototype.animate = function(context,canvas) {
    if (this.angles.angle < 1) {
        context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        window.requestAnimationFrame(this.draw(context));
    }
}

これに：

Ball.prototype.animate = function(context,canvas) {
    if (this.angles.angle < 1) {
        context.clearRect(0,0,1000,1000);
        console.log("Animating ... ");  
        this.origin.x = this.origin.x + 10; 
        this.origin.y = this.origin.y + 10; 
        this.angles.angle = this.angles.angle + this.angles.speed;
        var self = this;
        window.requestAnimationFrame(function() {self.draw(context)});
    }
}

に適切なコールバック関数を渡すようにしますrequestAnimationFrame()。

すべてのコードを含めたので、ここに別の問題があります。あなたはこれを行うことはできません:

canvas = document.getElementById("canvas");

DOM がまだロードされていないため、head タグの javascript でそのオブジェクトを見つけられません。<body>これは、DOM がロードされたことを示すイベントを待機するか、すべての DOM 要素の後にセクションの最後で JavaScript を実行することによって、DOM がロードされた場合にのみ行う必要があります。

次に、3 番目に、ブラウザ固有の形式の requestAnimationFrame を使用する必要があります。これは、各ブラウザが独自のプレフィックスを持っている可能性があるためです。私はこのコードを使用しました：

var reqestAnimationFrame = 
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame || 
    window.msRequestAnimationFrame ||
    window.webkitRequestAnimationFrame;

スクリプトを jsFiddle に入れて上記の変更を加えると、アニメーションが非常に速く実行されるため、表示されないことがわかります。アニメーションが特定の期間にわたって実行されるように、コードに時間要素を追加する必要があります。通常、これはアニメーションの継続時間を定義することによって行われ、アニメーションの各ステップで、経過した継続時間のパーセンテージに基づいてアニメーションの位置をスケーリングします。

requestAnimationFrame を使用した時間ベースのアニメーションの例を次に示します: http://jsfiddle.net/jfriend00/nRE7S/

于 2012-05-21T06:14:45.973 に答える