HTML5 画布 requestAnimationFrame() 不起作用

Question

我正在尝试使用 window.requestAnimationFrame() 来做一个简单的动画。不知何故，该函数没有被递归调用，也没有给出正确的代码。我文件的 javascript 代码是：

function OilPainting(){
  this.initialize=function(){
     var x=100;
    var canvas=document.getElementById("canvas");
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

  var context=canvas.getContext('2d');
    animate(canvas,context);
  }
}

var x=100;
var animate=function(canvas,context){
   window.requestAnimationFrame(animate);
  console.log("a");
  //console.log("a");
  /*for(var i=0;i<1;i++){
    var x=Math.random()*window.innerWidth;
    var y=Math.random()*window.innerHeight;
  context.beginPath();
  context.arc(x,y,30,0,2*Math.PI);
  context.stroke();
  //console.log("here");
    x+=1;*/

  context.beginPath();
  context.arc(x,100,30,0,2*Math.PI);
  context.clearRect(0,0,innerWidth,innerHeight);
  //console.log(x);
  context.stroke();
  x+=100;
 // console.log(x);
  }  
var app=new OilPainting();
app.initialize();

在这里，虽然控制台 a 被递归打印，但圆圈没有形成。我的 Codepen 的链接在这里。 requestAnimationFrame() 到底是如何使用的？

Answer 1

你的代码有太多问题...

这是应该如何完成的

var x = 100;

function OilPainting() {
    this.initialize = function() {
        var canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var context = canvas.getContext('2d');
        animate(canvas, context);
    }
}

var animate = function(canvas, context) {
    //console.log("a");
    context.clearRect(0, 0, innerWidth, innerHeight);
    context.beginPath();
    context.arc(x, 100, 30, 0, 2 * Math.PI);
    context.stroke();
    x += 1;
    
    requestAnimationFrame(function() {
        animate(canvas, context);
    });
}

var app = new OilPainting();
app.initialize();

body{margin:0;overflow:hidden}canvas{border:1px solid #d3d3d3}

<canvas id="canvas"></canvas>

^{为没有给出任何解释而道歉}