开发
API

Canvas.requestAnimationFrame

基础库 1.78.0 开始支持本方法,低版本需做兼容处理。这是一个同步方法。

在下次进行重绘时执行。

语法

Canvas.requestAnimationFrame(callback);

参数说明

参数类型默认值必填说明最低支持版本
callbackfunction浏览器在下次重绘之前调用的回调函数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
  • Tip:开发者工具暂不支持此能力,请用真机扫码调试。
点击纠错
评价此篇文档