微信小程序 画布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 示例代码

相关推荐
中小企业实战军师刘孙亮6 小时前
实体店的小程序转型之路:拥抱新零售的密码-中小企实战运营和营销工作室博客
职场和发展·小程序·创业创新·学习方法·业界资讯·零售·内容运营
说私域7 小时前
基于开源技术体系的品牌赛道力重构:AI智能名片与S2B2C商城小程序源码驱动的品类创新机制研究
人工智能·小程序·重构·开源·零售
王哈哈的学习笔记8 小时前
uniapp小程序使用echarts
前端·小程序·uni-app
前端太佬12 小时前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)
前端·微信·微信小程序
说私域13 小时前
颠覆传统微商!开源AI智能名片链动2+1模式S2B2C商城小程序:重构社交电商的“降维打击”革命
人工智能·小程序·开源·零售
ai大佬14 小时前
我是如何用AI编程制作一个AI表情包生成的小程序
人工智能·小程序·ai编程·api中转·apikey
2401_8906658614 小时前
免费送源码:Java+ssm+HTML 三分糖——甜品店网站设计与实现 计算机毕业设计原创定制
java·python·微信小程序·html·php·课程设计·android-studio
Maitians15 小时前
微信小程序 - 根据经纬度打开导航
微信小程序·小程序
前端太佬15 小时前
微信小程序支付全流程实战指南(Node.js后端篇)
前端·javascript·微信小程序
xuanjiong17 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app