微信小程序 画布canvas

news2025/1/18 13:51:57

属性说明

属性类型默认值必填说明最低版本
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.coloradmin.cn/o/1802047.html

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

相关文章

python中的函数递归

函数递归,就是一个函数,自己调用自己。 如上图所示,是一段通过定义函数,编写函数体来实现for循环。实现的是从1到n的累乘。即求n的阶乘, 如上图所示,是一段函数的递归来实现1到n的累乘操作,将1*…

问题:前肢的前方称() #微信#经验分享#微信

问题:前肢的前方称() A . 掌侧 B . 跖侧 C . 背侧 D . 胫侧 E . 桡侧 参考答案如图所示

数学模型:操作系统中FCFS、SJF、HRRN算法的平均周转时间比较 c语言

摘 要 研究目的:比较操作系统中进程调度FCFS、SJF、HRRN算法的平均周转时间和带权周转时间的大小关系。 研究方法:在建模分析时,分别举4个进程的例子,1个进程用两个字母分别表示到达时间和执行时间。分两种极端情况&#xff0c…

python数据分析-心脏衰竭分析与预测

研究背景 人的心脏有四个瓣膜,主动脉银、二尖、肺动脉和三尖源 不管是那一个膜发生了病变,都会导致心脏内的血流受到影响,这就是通常所说的心脏期膜病,很多是需要通过手术的方式进行改善的。随着人口老龄化的加剧,,心…

如何在快团团上找到优质的供货团长和挑选合适的产品进行推广?

在快团团上找到优质的供货团长和挑选合适的产品进行推广的方法如下: 筛选优质供货团长: 选择专业品类:根据你熟悉的领域和目标客户的需求,选择相应的专业供货团长。查看帮卖口碑标签:通过查看团长的帮卖口碑标签&#…

【排序算法】计数排序(CountSort)

一、定义 计数排序(CountSort)是一种非比较的排序,它的优势在于在对一定范围内的整数排序时,它的时间夫扎渡为为Ο(nk)(其中k是整数的范围),快于任何比较排序算法。 这是一种通过空间换取时间的…

vue antdesgin table 动态表头动态数据示例

以下是一个基于 Vue 和 Ant Design Vue 的示例&#xff0c;可以动态生成表格的表头和数据&#xff1a; <template><div><a-button click"addColumn">添加列</a-button><a-table :columns"columns" :dataSource"dataSource…

2024年全国一高考数学压轴题

(3) 证明: 显然, 等差数列 { a 1 , . . . , a 4 n 2 } \{a_{1},...,a_{4n2}\} {a1​,...,a4n2​} 是 ( i , j ) (i, j) (i,j)-可分的等价于等差数列 { 1 , . . . , 4 n 2 } \{1,...,4n2\} {1,...,4n2} 是 ( i , j ) (i,j) (i,j)-可分的. 前推后显然, 我们考虑后推前, 在去…

U盘文件系统结构损坏的应对与预防

在数字化时代&#xff0c;U盘作为便携式存储设备&#xff0c;其重要性不言而喻。然而&#xff0c;当U盘文件系统结构损坏时&#xff0c;我们可能会面临数据丢失的风险。本文将深入探讨U盘文件系统结构损坏的问题&#xff0c;分析其产生的原因&#xff0c;并给出相应的数据恢复方…

JMS VS AMQP

JMS&#xff08;Java Message Service&#xff09;是一个为Java平台设计的API&#xff0c;主要针对Java开发者提供了一套用于企业级消息服务的标准接口。而AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;是一个应用层协议&#xff0c;它提供了一个开放的、标准…

如何维护Mac系统 苹果电脑怎么维护保养 MacBook日常保养

你的Mac就像一辆豪华跑车&#xff0c;不仅外观时尚&#xff0c;性能也强劲。但即使是最顶级的跑车&#xff0c;如果不定期保养&#xff0c;也会渐渐失去光彩。维护Mac系统其实并不复杂&#xff0c;只需简单的日常关怀&#xff0c;就可以让你的电脑保持最佳状态。下面&#xff0…

姿态估计_超简易demo

// 所以所谓姿态估计到底怎么实现&#xff1f; // paper核心代码有点难找&#xff0c;所以先看个简单实现感受一下 Mediapipe Mediapipe是主要用于构建多模式音频&#xff0c;视频或任何时间序列数据的框架。借助MediaPipe框架&#xff0c;可以构建令人印象深刻的ML管道&…

【无标题】2024.6.7

2024.6.7 【高考咯&#xff01;&#xff01;&#xff01;学长们加油啊&#xff01;&#xff01;&#xff01;】 Friday 五月初二 A. 双色球 【题目描述】 机房来了新一届的学弟学妹&#xff0c;邪恶的chenzeyu97发现一位学弟与他同名&#xff0c;于是他当起了善良的学长233 “…

【Text2SQL 论文】PET-SQL:用 Cross-Consistency 的 prompt 增强的两阶段 Text2SQL 框架

论文&#xff1a;PET-SQL: A Prompt-enhanced Two-stage Text-to-SQL Framework with Cross-consistency ⭐⭐⭐ arXiv:2403.09732&#xff0c;商汤 & 北大 Code&#xff1a;GitHub 一、论文速读 论文一开始提出了以往 prompt-based 的 Text2SQL 方法的一些缺点&#xff1…

JVM学习-监控工具(三)

jconsole 从Java5开始&#xff0c;在JDK中自带的java监控和管理控制台用于对JVM中内存、线程、和类等的监控&#xff0c;是一个基本JMX(java management extendsions)的GUI性能监控工具 三种连接方式 Local&#xff1a;使用JConsole连接是一个正在本地系统运行的JVM&#xf…

Python通过数据验证功能在Excel文件中创建下拉列表

Excel表格的灵活性和功能性深受各行各业人士的喜爱。在Excel表格中&#xff0c;下拉列表功能是提升数据录入效率与准确性的一个重要利器&#xff0c;能够为用户提供预设的选择项&#xff0c;限制输入范围&#xff0c;避免手动输入错误&#xff0c;还能够简化数据录入过程&#…

命令行打包最简单的android项目从零开始到最终apk文件

准备好需要的工具 AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 jdk的链接我就不发出来,自己选择,我接下来用的是8版本的jdk和android10的sdk sdk的安装和环境变量的配置 sdk tool压缩包打开后是这样子,打开sdk mana…

nodeJs项目完结

文章目录 项目总结对象.addEventListener(事件, 函数)事件类型&#xff1a; 本地存储的方式cookielocalStoragesessionStorage 客户端获取与服务端获取服务端渲染客户端渲染 POST&GETfor of & for InPromise的方法1. Promise.resolve2. Promise.reject3. Promise.final…

阿里云活动推荐:AI 应用 DevOps 新体验

活动简介 阿里云新活动&#xff0c;体验阿里云的云效应用交付平台。体验了下&#xff0c;总体感觉还不错。平台把常规的开发过程封装成了模板&#xff0c;部署发布基本都是一键式操作&#xff0c;并且对自定义支持的比较好。 如果考虑将发布和部署搬到云上&#xff0c;可以玩一…

算法人生(21):从“React框架”看“情绪管理”

说起React框架&#xff0c;我们知道它是一种由Facebook开发和维护的开源JavaScript库&#xff0c;主要用于构建用户界面&#xff0c;特别是单页应用程序&#xff08;SPA&#xff09;。React框架围绕组件化&#xff0c;即把用户界面拆分为可复用的独立组件&#xff0c;每个组件负…