Canvas.requestAnimationFrame

收藏

我的收藏

基础库 1.78.0 开始支持本方法，这是一个同步方法。

在下次进行重绘时执行。

语法

Canvas.requestAnimationFrame(callback)

参数说明

callback

类型	默认值	必填	说明	最低支持版本
function		是	浏览器在下次重绘之前调用的回调函数	1.78.0

返回值

返回值 requestId 是一个正整数，作为动画帧请求 ID，可以传给 Canvas.cancelAnimationFrame 取消该动画帧请求。

扫码体验

代码示例

开发者工具中预览

<!-- index.ttml -->
<canvas id="myCanvas" type="2d"></canvas>

// index.js
Page({
  onReady: function (options) {
    tt.createSelectorQuery()
      .select("#myCanvas")
      .node()
      .exec((res) => {
        const canvas = res[0].node;
        const canvasCtx = canvas.getContext("2d");
        const requestId = canvas.requestAnimationFrame(function () {
          canvasCtx.fillStyle = "red";
          canvasCtx.fillRect(0, 0, 50, 50);
        });
        console.log("requestId", requestId);
      });
  },
});

Bug & Tip

• Tip：本 API 仅适用于<canvas> 组件 V2。