更新时间：2024-03-22 16:24:38贡献者 3收藏订阅更新我的文档设置返回文档简介画布是一个矩形区域，用于在页面上绘制图形、动画，开发者可以控制其中的每一个像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。基础库 2.7.0 起支持新版 canvas。新版 canvas 支持同层渲染，使用时必须指定 type 属性和 onready 事件。相关 api 可查看 获取 canvas 实例。如果您的项目中已使用类似 这样未指定 type 的标签，请参考 旧版 canvas 迁移指南 。使用说明●native 渲染引擎：基础库 2.9.7 、客户端 10.5.56 开始支持。可以通过my.caniuse('canvas') 判断是否支持。属性说明属性类型描述idstring组件唯一标识符。 注意：同一页面中的 id 不可重复。typestring类型。设置 type 属性后，会渲染成 native canvas。 可选值：2d、webgl 版本要求：基础库 2.7.0 及以上onreadyeventhandlecanvas 组件初始化成功事件。 版本要求：基础库 2.7.0 及以上widthstring画布宽度。默认值： 300pxheightstring画布高度。默认值： 225pxstylestring-classstring-disable-scrollboolean禁止屏幕滚动以及下拉刷新。 默认值： falseontapeventhandle点击事件。ontouchstarteventhandle触摸动作开始事件。ontouchmoveeventhandle触摸后移动事件。ontouchendeventhandle触摸动作结束事件。ontouchcanceleventhandle触摸动作被打断，如来电提醒，弹窗事件。onlongtapeventhandle长按 500ms 之后触发，触发了长按事件后进行移动将不会触发屏幕的滚动。使用canvas2dwebglbug & tip●使用新版 canvas 必须指定 type 类型。●必须在 canvas 组件的 onready 回调函数中获取 canvas 实例和上下文。●若要在高 dpr（devicepixelratio）下取得更细腻的显示，可以设置较大的画布大小，然后用样式等比例缩小组件。例如：附录：配置同层组件的覆盖元素不响应事件简介覆盖在同层组件上方的元素（后称：覆盖元素）默认响应 ui 事件，在 web 标准下配置 pointer-events: none 使事件穿透覆盖元素，令同层组件响应事件，而 ios 平台不支持上述用法，可采用如下方法适配。使用限制●支持 video、lottie、camera、canvas、map 组件。●基础库版本 2.9.9 及以上。●支付宝版本 10.5.63 及以上。●ios 系统版本 15 及以上。方法1覆盖元素不响应 ui 事件，穿透至同层组件上。2使用 cover-view 组件包裹覆盖元素，配置了 penetrateguesture 属性的 cover-view 组件保证 ios 平台生效，而 android 平台则沿用 pointer-events: none。
