Canvas.cancelAnimationFrame

收藏

我的收藏

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

取消由 Canvas.requestAnimationFrame 添加到计划中的动画帧请求。

语法

Canvas.cancelAnimationFrame(requestId)

参数说明

requestId

类型	默认值	必填	说明	最低支持版本
number		是	动画帧请求 ID，调用 Canvas.requestAnimationFrame 时返回	1.78.0

返回值

无

扫码体验

代码示例

开发者工具中预览

<!-- index.ttml -->
<canvas
  id="myCanvas"
  type="2d"
  style="width: {{width}}px; height: {{height}}px"
></canvas>
<button type="primary" size="default" bindtap="start">start</button>
<button type="primary" size="default" bindtap="stop">stop</button>

// index.js
let canvas, canvasCtx, requestId;
Page({
  data: {
    width: 100,
    height: 100,
  },
  onReady() {
    tt.createSelectorQuery()
      .select("#myCanvas")
      .node()
      .exec((res) => {
        canvas = res[0].node;
        canvasCtx = canvas.getContext("2d");
        canvasCtx.font = "20px Georgia";
        canvasCtx.fillStyle = "red";
      });
  },
  render() {
    requestId = canvas.requestAnimationFrame(this.render);
    if (requestId < 1000) {
      canvasCtx.clearRect(0, 0, 100, 100);
      canvasCtx.fillText(requestId, 0, 50);
    } else {
      canvas.cancelAnimationFrame(requestId);
    }
  },
  start() {
    requestId = canvas.requestAnimationFrame(this.render);
  },
  stop() {
    canvas.cancelAnimationFrame(requestId);
  },
});

Bug & Tip

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