Canvas.cancelAnimationFrame

收藏

我的收藏

Canvas.cancelAnimationFrame(requestId)

<!-- 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);
  },
});