canvas

基础库 1.0.0 开始支持本组件。

画布。可使用 JS 操作 Canvas 上下文进行绘制。版本 1.78.0 起支持一套新 Canvas 接口支持(需指定 type 属性)。新老方案使用规则如下:

  • 指定 type 属性,且为合法值(2dwebgl)时采用新方案。本方案中的 <canvas> 组件是由客户端创建的原生组件,使用时请注意相关限制。需通过 SelectorQuery 获取 Canvas 实例 使用相关能力。
  • 否则为 web 组件,相关 api: tt.createCanvasContext

属性说明

属性名类型默认值必填说明最低支持版本
typestring指定 canvas 类型,有效值值为 2d 和 webgl1.78.0
canvas-idstringcanvas 组件的标识,若指定了 type 则无需再指定该属性,否则必须设置该属性1.0.0
bindtouchstarteventhandle手指触摸动作开始1.78.0
bindtouchmoveeventhandle手指触摸后移动1.78.0
bindtouchendeventhandle手指触摸动作结束1.78.0
bindtouchcanceleventhandle手指触摸动作被打断1.78.0

代码示例

【代码示例 1】

开发者工具中预览

【代码示例 2】: 新方案 canvas 绘制示例

<!-- 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) => {
        const canvas = res[0].node;
        const canvasCtx = canvas.getContext("2d");
        // 画布尺寸初始值同组件大小,放到手机屏幕后相当于将初始大小的画布放大为手机屏幕比例
        // 因此使用画布前需要将画布设置为手机屏幕相同比例
        canvasCtx.canvas.width *= devicePixelRatio;
        canvasCtx.canvas.height *= devicePixelRatio;
        // 同时需要缩放画布 x,y 方向尺寸
        canvasCtx.scale(devicePixelRatio, devicePixelRatio);
        canvasCtx.clearRect(0, 0, 300, 225);

        canvasCtx.fillStyle = this.data.color;
        canvasCtx.font = "30px sans-serif";
        canvasCtx.fillText("ByteDance canvas", 0, 30);
      });
  },
});

扫码体验

请使用字节宿主APP扫码

Bug & Tip

  • Tip: <canvas> 组件的默认宽度为 300px,高度为 225px。
  • Tip: iOS 下,<canvas> 组件的画布面积(宽度 ✖️ 高度)最大为 16777216 。
  • Tip: 若指定了 type 属性,且为合法值,则为 canvas 新方案,该组件为原生组件,使用时请注意相关限制。
  • Tip: canvas 新方案Android 基础库 1.87.0 起支持同层渲染。
  • Tip: canvas 新方案提供了释放 canvas 的方法,为减少内存占用,建议离开页面时通过 CanvasContext.canvas.dispose() 主动释放 canvas 的资源,释放后绑定的 CanvasContext 将无法使用。
  • Tip: canvas 新方案,若修改 <canvas> 组件的宽高,也需要修改对应 canvas 画布的宽高(如CanvasContext.canvas.width=100)。
  • Tip: canvas 新方案,画布初始尺寸同组件尺寸,插入后需要将画布尺寸设置为设备相同比例,同时缩放 CanvasContext x,y 轴方向比例,可参考 代码示例-【代码示例 2】。
点击纠错
评价此篇文档