开发
API

Canvas

基础库 1.78.0 开始支持本实例,低版本需做兼容处理

Canvas 实例,可通过 SelectorQuery 获取。

属性

number width

画布宽度,单位 px。

number height

画布高度,单位 px。

方法

Canvas.getContext(string contextType)

该方法返回 Canvas 的绘图上下文。

Canvas.requestAnimationFrame(function callback)

在下次进行重绘时执行。

Canvas.cancelAnimationFrame(number requestID)

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

Canvas.createImage()

创建一个图片对象。

代码示例

<!-- index.ttml -->
<canvas id="myCanvas" type="2d"></canvas>
// index.js
Page({
  onReady: function (options) {
    const { devicePixelRatio } = tt.getSystemInfoSync();
    tt.createSelectorQuery()
      .select("#myCanvas")
      .node()
      .exec((res) => {
        // 获取 canvas 实例
        const canvas = res[0].node;
        const canvasCtx = canvas.getContext("2d");
        // 画布尺寸初始值同组件大小,放到手机屏幕后相当于将初始大小的画布放大为手机屏幕比例
        // 因此使用画布前需要将画布设置为手机屏幕相同比例
        canvasCtx.canvas.width *= devicePixelRatio;
        canvasCtx.canvas.height *= devicePixelRatio;
        canvasCtx.clearRect(0, 0, 300, 225);

        canvasCtx.fillStyle = this.data.color;
        const fontSize = 30 * devicePixelRatio;
        canvasCtx.font = `${fontSize}px sans-serif`;
        canvasCtx.fillText("ByteDance canvas", 0, fontSize);
      });
  },
});

Bug & Tip

点击纠错
评价此篇文档