抖音开放平台Logo
开发者文档
“/”唤起搜索
控制台
  • JS API 列表
  • 基础
  • TTML
  • 网络
  • 媒体
  • 地图
  • 文件
  • 数据缓存
  • 地理位置
  • 设备
  • 画布
  • V1
  • V2
  • tt.createOffscreenCanvas
  • RenderingContext
  • Image
  • Canvas
  • Canvas
  • Canvas.getContext
  • Canvas.requestAnimationFrame
  • Canvas.cancelAnimationFrame
  • Canvas.toDataURL
  • Canvas.createImage
  • OffscreenCanvas
  • 界面
  • 页面导航
  • 开放接口
  • 行业开放
  • 第三方平台
  • 其它
  • 生活服务(即将废弃)
  • Canvas.getContext
    收藏
    我的收藏

    基础库 1.78.0 开始支持本方法,这是一个同步方法。
    获取 Canvas 的绘图上下文。

    语法

    Canvas.getContext(contextType)

    参数说明

    contextType

    类型
    默认值
    必填
    说明
    最低支持版本
    string
    ​
    是
    canvas 上下文类型
    1.78.0

    contextType 的合法值

    值
    说明
    最低支持版本
    2d
    2d 绘图上下文
    1.78.0
    webgl
    webgl 绘图上下文
    1.78.0
    webgl2
    webgl2 绘图上下文
    4.10.0

    返回值

    扫码体验

    代码示例

    <!-- 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。
    ​