爲什麼這個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腳本不起作用？

回答

相關問題