微信小程序 画布canvas

属性说明

属性类型默认值必填说明最低版本
typestring指定 canvas 类型,支持 2d (2.9.0) 和 webgl (2.7.0)2.7.0
canvas-idstringcanvas 组件的唯一标识符,若指定了 type 则无需再指定该属性1.0.0
disable-scrollbooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新1.0.0
bindtouchstarteventhandle手指触摸动作开始1.0.0
bindtouchmoveeventhandle手指触摸后移动1.0.0
bindtouchendeventhandle手指触摸动作结束1.0.0
bindtouchcanceleventhandle手指触摸动作被打断,如来电提醒,弹窗1.0.0
bindlongtapeventhandle手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动1.0.0
binderroreventhandle当发生错误时触发 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 示例代码

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/850738.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】解决Python报错:KeyError: ‘username‘

​​​​ 文章目录 引言1. 错误详解2. 常见的出错场景2.1 用户输入处理错误2.2 动态数据源 3. 解决方案3.1 使用 get() 方法3.2 检查键是否存在 4. 预防措施4.1 数据验证4.2 使用默认字典 (defaultdict) 结语 引言 在Python开发中,处理字典时遇到 KeyError 是一种…

Elastic 8.14:用于简化分析的 Elasticsearch 查询语言 (ES|QL) 正式发布

作者:来自 Elastic Brian Bergholm 今天,我们很高兴地宣布 Elastic 8.14 正式发布。 什么是新的? 8.14 版本最重要的标题是 ES|QL 的正式发布(GA),它是从头开始设计和专门构建的,可大大简化数据调查。在新的查询引擎的…

Mac环境下,简单反编译APK

一、下载jadx包 https://github.com/skylot/jadx/releases/tag/v1.4.7 下载里面的这个:下载后,找个干净的目录解压,我是放在Downloads下面 二、安装及启动 下载和解压 jadx: 下载 jadx-1.4.7.zip 压缩包。将其解压到你希望的目…

【DevOps】SD-WAN 详解:定义、架构、优势与应用

目录 一、传统 WAN 的局限性 二、SD-WAN 的解决方案 三、SD-WAN 的架构 四、SD-WAN的关键特点 五、SD-WAN 的优势 六、SD-WAN 的应用场景 七、总结 SD-WAN (Software-Defined Wide Area Network) 是一种利用软件定义网络 (SDN) 技术来简化分支机构与数据中心或云端之间连…

spdlog源码解析

基础抽象 #mermaid-svg-8Wlnt0sI42bDkciS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8Wlnt0sI42bDkciS .error-icon{fill:#552222;}#mermaid-svg-8Wlnt0sI42bDkciS .error-text{fill:#552222;stroke:#552222;}#…

【数据结构】排序——插入排序,选择排序

前言 本篇博客我们正式开启数据结构中的排序,说到排序,我们能联想到我之前在C语言博客中的冒泡排序,它是排序中的一种,但实现效率太慢,这篇博客我们介绍两种新排序,并好好深入理解排序 💓 个人主…

HC-SR505人体感应灯

1硬件 1.1硬件组成 1.正点原子探索者开发板 2 HC-SR505迷你小型人体感应模块 3 继电器+5V小灯 HC-SR505迷你小型人体感应模块介绍 1.2 硬件连接 1.HC-SR505(连接在PE0) 2.继电器(连接在PE1) 2.主要代码 int ma…

【nerf】nvidia-smi

当cmd下nvidia -smi不能使用时候 沿着以下路径打开cmd,再输入,可以查看cuda版本 然后查看电脑安装的

【QT5】<总览五> QT多线程、TCP/UDP

文章目录 前言 一、QThread多线程 二、QT中的TCP编程 1. TCP简介 2. 服务端程序编写 3. 客户端程序编写 4. 服务端与客户端测试 三、QT中的UDP编程 1. UDP简介 2. UDP单播与广播程序 前言 承接【QT5】<总览四> QT常见绘图、图表及动画。若存在…

【代码随想录训练营】【Day 44】【动态规划-4】| 卡码 46, Leetcode 416

【代码随想录训练营】【Day 44】【动态规划-4】| 卡码 46, Leetcode 416 需强化知识点 背包理论知识 题目 卡码 46. 携带研究材料 01 背包理论基础01 背包理论基础(滚动数组)01 背包 二维版本:dp[i][j] 表示从下标为[0-i]的物…

二叉树—leetcode

前言 本篇博客我们来仔细说一下二叉树二叉树的一些OJ题目 请看完上一篇:数据结构-二叉树-CSDN博客 💓 个人主页:普通young man-CSDN博客 ⏩ 文章专栏:LeetCode_普通young man的博客-CSDN博客 若有问题 评论区见📝 &…

Llama模型家族之Stanford NLP ReFT源代码探索 (四)Pyvene论文学习

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (三) 基于 LlaMA…

实验三、拓扑布局和建立小型网络《计算机网络》

假期制定的各种计划但凡实施了一点,也不至于一点都没有实施。 目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 1. 正确识别网络中使用的电缆线; 2. 为点对点网络和交换网络实施物理布线; 3. 验证每个网络的基本连通性。…

音视频转为文字SuperVoiceToText

音视频转为文字SuperVoiceToText,它能够把视频或语音文件高效地转换为文字,它是基于最为先进的 AI 大模型,通过在海量语音资料上进行训练学习而造就,具备极为卓越的识别准确率。 不仅如此,它支持包括汉语、英语、日语…

Java数据结构准备工作---常用类

文章目录 前言1.包装类1.1.包装类基本知识1.2.包装类的用途1.3.装箱和拆箱1.3.1.装箱:1.3.2.拆箱 1.4 包装类的缓存问题 2.时间处理类2.1.Date 时间类(java.util.Date)2.2.DateFormat 类和 SimpleDateFormat 类2.3.Calendar 日历类 3.其他常用类3.1.Math类3.2.Rando…

Diffusers代码学习: T2I Adapter

T2I Adapter是一款轻量级适配器,用于控制文本到图像模型并为其提供更准确的结构指导。它通过学习文本到图像模型的内部知识与外部控制信号(如边缘检测或深度估计)之间的对齐来工作。 T2I Adapter的设计很简单,条件被传递到四个特征…

前端使用轮播图的方法有哪些

前端使用轮播图的方法可以使用swiper:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 这是swiper官网,在官网里面可以找到很多轮播图的实际案例: 我们挑选可用的案例或者修改的案例,打开后打开源码,就可以获取到当前的源码了,加以调试就可以获得我们需要的结果, 例如: 上图…

【Redis】Redis分布式锁的基本原理和具体实现

Redis 分布式锁是一种在分布式系统中使用 Redis 实现的锁机制,用于确保多个进程或线程在某个时间段内只有一个能够访问共享资源。它可以用于解决分布式环境下的并发问题。下面详细介绍 Redis 分布式锁的实现方法,包括其基本原理和具体实现。 基本原理 …

vue3模板语法总结

1. 响应式数据 Vue 3中的数据是响应式的,即当数据发生变化时,视图会自动更新。这是通过使用JavaScript的getter和setter来实现的。 2. 组件化 Vue 3采用组件化开发方式,允许创建可复用的组件。 每个组件都有自己的作用域,并且…

KEIL5如何打开KEIL4的GD工程

GD官方提供的很多KEIL例程为KIEL4的版本,读者使用的时候可能会碰到使用KEIL5打开KEIL4的工程会报错以及无法找到芯片选型的问题,具体表现如下图所示。 我们该怎么办呢? 下面为大家介绍两种方法: 第一种方法是在keil4的工程后缀u…