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");

在 javascript 中的 head 标记中，因为 DOM 尚未加载，因此它不会找到该对象。您必须仅在 DOM 已加载时执行此操作，方法是等待表示 DOM 已加载的事件，或者在<body>所有 DOM 元素之后在该部分的每一端运行 javascript。

然后，第三，您必须使用特定于浏览器的 requestAnimationFrame 形式，因为每个浏览器都可能有自己的前缀。我使用了这段代码：

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

当我将您的脚本放入 jsFiddle 并进行上述更改时，我发现动画运行得如此之快以至于看不到它。您的代码需要向其中添加时间元素，以便动画在特定时间段内运行。通常这是通过定义动画的持续时间来完成的，并且在每个动画步骤中，您可以根据持续时间的百分比来缩放动画的位置。

这是使用 requestAnimationFrame 的基于时间的动画示例：http: //jsfiddle.net/jfriend00/nRE7S/

于 2012-05-21T06:14:45.973 回答