Javascript 画布上下文-缓存window.requestAnimationFrame回调函数的变量值 var画布； var语境； var-screenH； var-screenW； var半径=20； $（'document'）.ready（函数（）{ //拿画布 画布=$（“#热图”）； //计算屏幕大小 screenH=canvas.height（）； screenW=canvas.width（）； //填满画布 canvas.attr（“高度”，屏幕高度）； canvas.attr（'width'，screenW）； context=canvas[0]。getContext（'2d'）； var x=数学圆整（（数学随机（）*（.75-.25）+.25）*screenW）； 变量y=Math.round（（Math.random（）*（.65-.35）+.35）*screenH）； 圆圈（画布，x，y）； }) 功能圆（画布，x，y）{ context.save（）； context.beginPath（）； 弧（x，y，半径，0,2*Math.PI）； closePath（）； 半径+=1； 如果（半径

这里的目标是有一个不断增长的圆圈，并随机放置在画布内，但在一个范围内。所以这里的问题是

窗口。requestAnimationFrame（圆圈）

将递归地点燃圆圈（），直到可变半径达到60。但由于

circle（）

是一个单独的函数，因此x和y未定义。所以我想我需要缓存x和y的初始值，并将其传递到回调中？

下面是一个简单的示例：

var半径=20；
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
canvas.height=内部高度；
canvas.width=内部宽度；
var x=（Math.random（）*（0.75-0.25）+0.25）*canvas.width；
变量y=（Math.random（）*（0.65-0.35）+0.35）*canvas.height；
圆（ctx，x，y，半径）；
功能圆（ctx、x、y、半径）{
（函数animate（）{
ctx.beginPath（）；
弧（x，y，半径++，0，2*Math.PI）；
ctx.fill（）；
如果（半径<61）{
window.requestAnimationFrame（动画）；
}
})();
}

将变量和

圆圈

函数放在文档中。准备好回调。我显然需要它本身就是一个函数@TeemuWhy？您不应该污染全局命名空间。只有在与外部文档（即弹出窗口或iframe）交互时，才需要全局变量，而在其他情况下，确实不需要全局变量。请注意，您可以在其他函数中包含函数声明，它们的行为与任何声明的函数一样，只是它们不是全局的。

var canvas;
var context;
var screenH;
var screenW;
var radius = 20;

$('document').ready(function(){

  // Get the canvas
    canvas = $('#heatmap');

  // Calculate the screen size
    screenH = canvas.height();
    screenW = canvas.width();

    // Fill out the canvas
    canvas.attr('height', screenH);
    canvas.attr('width', screenW);
    context = canvas[0].getContext('2d');

  var x = Math.round( (Math.random()*(.75-.25)+.25) * screenW);
  var y = Math.round( (Math.random()*(.65-.35)+.35) * screenH);

  circle(canvas, x, y);
})


function circle(canvas, x, y){

  context.save();
  context.beginPath();
  context.arc(x,y,radius,0,2*Math.PI);
  context.closePath();

  radius += 1;
  if(radius < 61){
    window.requestAnimationFrame(circle)
  }

  context.fill();
  context.restore(); 
}