开发
API

Canvas.cancelAnimationFrame

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

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

语法

Canvas.cancelAnimationFrame(requestId)

参数说明

参数类型默认值必填说明最低支持版本
requestIdnumber动画帧请求 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
  • Tip:开发者工具暂不支持此能力,请用真机扫码调试。
点击纠错
评价此篇文档