Canvas.getContext

收藏

我的收藏

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

获取 Canvas 的绘图上下文。

语法

Canvas.getContext(contextType)

参数说明

contextType

类型	默认值	必填	说明	最低支持版本
string		是	canvas 上下文类型，必须与对应 <canvas> 组件 V2 中的 type 属性保持一致	1.78.0

返回值

RenderingContext

扫码体验

代码示例

开发者工具中预览

<!-- index.ttml -->
<canvas type="2d" id="myCanvas"></canvas>

// index.js
Page({
  onReady: function (options) {
    tt.createSelectorQuery()
      .select("#myCanvas")
      .node()
      .exec((res) => {
        console.log("--- res", res);
        const canvas = res[0].node;
        const canvasCtx = canvas.getContext("2d");
        // 可调用 canvas 2d 上下文的API
        canvasCtx.fillStyle = "red";
        canvasCtx.fillRect(0, 0, 50, 50);
      });
  },
});

Bug & Tip

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