为什么这个requestAnmationFrame脚本不起作用？

我想要使用html5制作一个球，并且我实现了这个小脚本。但是，我看不到任何动画。我该如何解决这个问题？为什么这个requestAnmationFrame脚本不起作用？

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

来源

2012-05-21 Vimal Basdeo

您对requestAnimationFrame()呼叫没有经过回调，它的执行功能，并通过其返回值是不确定的。让你通过一个适当的回调函数来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; 
     var self = this; 
     window.requestAnimationFrame(function() {self.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; 
     window.requestAnimationFrame(this.draw(context)); 
    } 
}

了这一点。

现在你已经包含了所有的代码，这里是另一个问题。因为DOM还没有加载，所以它不会找到对象在头标记的JavaScript

canvas = document.getElementById("canvas");

：你不能做到这一点。只有当通过等待表示DOM已加载的事件或通过在所有DOM元素之后的<body>部分的每一端运行javascript时，才必须执行此操作。

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

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

当我把你的脚本到的jsfiddle做出上述改变，我发现是动画如此之快，但并未运行。您的代码需要添加时间元素，以便动画在特定时间段内运行。通常这是通过定义动画的持续时间来完成的，并且在每个动画步骤中，基于持续时间的百分比来缩放动画的位置。

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

来源

2012-05-21 06:14:45 jfriend00

它不WRK still..Here是在控制台动画化输出... 未捕获的类型错误：对象[对象窗口]没有方法'draw' –

浏览器报告的脚本错误是什么？由于您未包含所有代码，因此我们无法自行运行以进行调试。 – jfriend00

我已经包含它 –

为什么这个requestAnmationFrame脚本不起作用？

回答

相关问题