javascript - Canvas 是否有显示事件处理程序？

Question

我习惯使用 GLUT 的 PostRedisplay和 (App|UI)Kit 的 setNeedsDisplay当应用程序希望重绘场景时请求将新的显示事件发布到事件队列的方法。我还没有找到与 HTML5 的 Canvas 元素对应的元素。例如，当我想重绘到 Canvas 时，我目前只是直接调用我的 display() 函数:

function mouseMove(event) {
      if (mouseDrag) {
          // update camera position
          display();
      }
  }

display() 函数渲染场景(这可能很昂贵):

function display() {
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
      // issue WebGL calls to redraw scene
      gl.flush();
}

如果在最后一次渲染完成之前发生多个渲染请求，我习惯的大多数系统会将多个显示事件合并为一个事件。如果一长串 display() 调用超过渲染速度，我在上面所做的事情可能会出现问题。

无论如何，有效重绘 Canvas 元素的正确方法是什么？

You can see the demo app I am working on here (如果您启用了 WebGL)。

更新 :根据下面的回答，我现在使用 RequestAnimationFrame 并将返回值用作标志以指示已发出请求。渲染场景后，我清除标志以便可以发出进一步的请求:

var requestId = 0; // id of current requestAnimationFrame request (0 = no request)

function mouseMove(event) {
      if (mouseDrag) {
          // update camera position
          if (requestId)
            requestId = requestAnimationFrame(display);
          else
             console.log("request already in queued"); // test
      }
 }

function display() {
      requestId = 0;
      // redraw scene
}

注意我收到的日志消息确实合并了多个请求。这似乎是一个很好的方法。还有其他解决方案吗？

Answer 1

您可以使用 requestAnimationFrame(display) 设置回调(在本例中为 display)以在下次重绘时调用。

您只能在等待重绘时调用它一次(在重绘时，它将对您对 requestAnimationFrame 的每次 调用进行回调)。如果您想连续设置动画，您也可以请求另一个动画帧。