微信小程序 画布canvas

属性说明

属性 类型 默认值 必填 说明 最低版本
type string 指定 canvas 类型,支持 2d (2.9.0) 和 webgl (2.7.0) 2.7.0
canvas-id string canvas 组件的唯一标识符,若指定了 type 则无需再指定该属性 1.0.0
disable-scroll boolean false 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新 1.0.0
bindtouchstart eventhandle 手指触摸动作开始 1.0.0
bindtouchmove eventhandle 手指触摸后移动 1.0.0
bindtouchend eventhandle 手指触摸动作结束 1.0.0
bindtouchcancel eventhandle 手指触摸动作被打断,如来电提醒,弹窗 1.0.0
bindlongtap eventhandle 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 1.0.0
binderror eventhandle 当发生错误时触发 error 事件,detail = {errMsg}

ug & Tip

  1. tip:canvas 标签默认宽度300px、高度150px
  2. tip:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作
  3. tip:请注意原生组件使用限制
  4. tip:开发者工具中默认关闭了 GPU 硬件加速,可在开发者工具的设置中开启"硬件加速"提高 WebGL 的渲染性能
  5. tip: WebGL 支持通过 getContext('webgl', { alpha: true }) 获取透明背景的画布
  6. tip: WebGL 暂不支持真机调试,建议使用真机预览
  7. tip: Canvas 2D(新接口)需要显式设置画布宽高,默认:300*150,最大:1365*1365
  8. bug: 避免设置过大的宽高,在安卓下会有crash的问题
  9. tip: iOS 暂不支持 pointer-events
  10. tip: 在 mac 或 windows 小程序下,若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项,该内置组件可能会出现非预期表现(详情参考 enablePassiveEvent 文档

Canvas 2D 示例代码

相关推荐
汤姆yu4 分钟前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域7 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域10 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔10 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun14 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-545814 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序