• 组件概述
  • 基础内容
  • 视图容器
  • 表单
  • 导航
  • 媒体
  • 画布
  • canvas 画布
  • 地图
  • 开放能力
  • 行业开放
  • 原生组件
  • canvas 画布
    收藏
    我的收藏

    基础库 1.0.0 开始支持本组件。 基础库 1.78.0 开始支持 v2 版本。
    画布。可使用 JS 操作 Canvas 上下文进行绘制。
    目前支持 v1,v2 两个版本,说明如下:
      v2:属性 type 为 2dwebgl。需通过 SelectorQuery 获取 Canvas 实例 使用相关能力。本方案的 canvas 组件为原生组件,使用时请注意原生组件相关限制。

    属性说明

    属性名
    类型
    默认值
    必填
    说明
    最低支持版本
    canvas-id
    string
    [v1]canvas 组件的标识
    1.0.0
    type
    string
    [v2]指定 canvas 类型,有效值为 "2d" 和 "webgl"
    1.78.0
    bindtouchstart
    EventHandle
    [v2]手指触摸动作开始
    1.78.0
    bindtouchmove
    EventHandle
    [v2]手指触摸后移动
    1.78.0
    bindtouchend
    EventHandle
    [v2]手指触摸动作结束
    1.78.0
    bindtouchcancel
    EventHandle
    [v2]手指触摸动作被打断
    1.78.0

    扫码体验

    代码示例

    Bug & Tip

      Tip: 组件的默认宽度为 300px,高度为 225px。
      Tip: iOS 下, 组件的画布面积(宽度 ✖️ 高度)最大为 16777216 。
      Tip: 若指定了 type 属性,且为合法值,则为 canvas 新方案,该组件为原生组件,使用时请注意相关限制。
      Tip: 【V2】Android 基础库 1.87.0 起支持同层渲染。
      Tip: 【V2】若修改 组件的宽高,也需要修改对应 canvas 画布的宽高(如CanvasContext.canvas.width=100)。
      Tip: 【V2】画布初始尺寸同组件尺寸,插入后需要将画布尺寸设置为设备相同比例,同时缩放 CanvasContext x,y 轴方向比例,可参考 代码示例