requestAnimationFrame在循环绘制中的位置

在使用requestAnimationFrame进行循环绘制时，通常会将绘制代码放在requestAnimationFrame的回调函数中。这样可以确保绘制代码在每一帧绘制之前都会被调用。

以下是一个简单的示例代码，演示了如何使用requestAnimationFrame进行循环绘制：

function draw() {
  // 绘制代码
  
  requestAnimationFrame(draw); // 在回调函数中再次请求下一帧绘制
}

// 启动循环绘制
requestAnimationFrame(draw);

在上面的示例中，draw函数是用于执行绘制操作的函数。在draw函数中，你可以编写所有的绘制代码。然后，在draw函数的末尾，通过调用requestAnimationFrame(draw)来请求下一帧的绘制。这样，每一帧都会调用draw函数进行绘制，从而实现循环绘制。

需要注意的是，requestAnimationFrame的回调函数会在浏览器每一帧绘制之前被调用，所以绘制代码应该放在回调函数中，而不是在外部或其他地方。

此外，为了确保循环绘制的正常执行，你可能还需要添加一些条件来控制绘制的停止。例如，可以使用一个标志变量来控制循环的开始和结束：

let isDrawing = true;

function draw() {
  // 绘制代码
  
  if (isDrawing) {
    requestAnimationFrame(draw); // 在回调函数中再次请求下一帧绘制
  }
}

// 启动循环绘制
requestAnimationFrame(draw);

// 停止循环绘制
isDrawing = false;

在上面的示例中，通过设置isDrawing变量为false，可以停止循环绘制。当isDrawing为false时，draw函数将不再请求下一帧的绘制，从而达到停止绘制的效果。