Почему этот скрипт 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() не проходит обратный вызов, он выполняет функции и передавая ее возвращаемое значение, которое не определено. Я хотел бы предложить вам изменить:

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 в голове тега, так как DOM еще не загружен, поэтому он не обнаружит, что объект. Вы должны сделать это только тогда, когда DOM загрузили либо путем ожидания события, которое означает, что DOM был загружен, либо путем запуска javascript на каждом конце раздела <body> ПОСЛЕ всех элементов DOM.

Затем, в-третьих, вы должны использовать форму 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 является выход в консоли оживляющий ... Uncaught TypeError: Object [Объект Window] не имеет какого-либо метода 'draw' –

Какие ошибки скриптов являются отчетами браузера? Поскольку вы не включили весь свой код, мы не можем запустить его самостоятельно для отладки. – jfriend00

Я включил его сейчас –

Почему этот скрипт requestAnmationFrame не работает?

ответ

Смежные вопросы