开发
API

Canvas.cancelAnimationFrame

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

取消由 requestAnimationFrame 添加到计划中的动画帧请求。支持在 2D Canvas 和 WebGL Canvas 下使用。

语法

Canvas.cancelAnimationFrame(requestId)

参数说明

number requestId

请求 ID,调用 requestAnimationFrame 时返回。

代码示例

<!-- 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, animateId;
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() {
    animateId = canvas.requestAnimationFrame(this.render);
    if (animateId < 1000) {
      canvasCtx.clearRect(0, 0, 100, 100);
      canvasCtx.fillText(animateId, 0, 50);
    } else {
      canvas.cancelAnimationFrame(animateId);
    }
  },
  start() {
    animateId = canvas.requestAnimationFrame(this.render);
  },
  stop() {
    canvas.cancelAnimationFrame(animateId);
  },
});

Bug & Tip

  • Tip:开发者工具暂不支持此能力,请用真机扫码调试。
点击纠错
评价此篇文档