微信 小程序 canvas

测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样

微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas

 

下面全是我一点点测试出的干货,耐心看:

1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式,可以理解为他就是个框吧;

2.wxcanvas不要当成真的H5canvas,就当它是个div就行,画出范围的东西也是存在的,改变width,height就显示出来了,或者说这里有重绘,但具体如何实现的不知道;

3.改变wxcanvas的style的width,height,并不改为原画布上的东西的大小;

4.css transform变换中的变大缩小也无法改变原画布上的东西大小

5.官方说法:context只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>

实际上,context.getActions()后,context中的信息会被清空,如果想重复利用,需要var temp=context.getActions()将操作数组保存下来,才可重复用于wx.drawcanvas;

6.注意

wx.drawCanvas({canvasId: 'target',actions: context.getActions()
});

默认会清空画布,想不清空需要

wx.drawCanvas({canvasId: 'target',actions: context.getActions(),reserve:true
});

7.《重点》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}px;height:{{height}}px'></canvas>

注意,disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动,catchtouchmove是不行的

上面的写法,ccvsMove和cvsMove会都触发,

ccvsMove返回的是普通touch事件对象,有pageX,clientX等,

cvsMove返回的是canvasTouch事件对象,没有pageX,clientX,只有x,y

8.

wx.drawCanvas({canvasId: 'target',actions: [],reserve:false
});

可以清空画布和画布的状态

9.画布的scale tranlate rotate等状态,在reserve:true时会接着上次的状态

10. context.getActions()返回的数组很有用,打印出来你会发现里面的内容你都能看懂,可以直接修改数组改变画的动作

11.wx.drawCanvas时context.drawImage在手机上可以画出来,在电脑开发工具上画不出来

12.wx.canvasToTempFilePath

官方文档中只有一行,原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多;
复制代码
            wx.canvasToTempFilePath({canvasId: 'target',success: function success(res) {wx.saveFile({tempFilePath: res.tempFilePath,success: function success(res) {console.log('saved::' + res.savedFilePath);},complete: function fail(e) {console.log(e.errMsg);}});},complete: function complete(e) {console.log(e.errMsg);}});
复制代码

 

转载于:https://www.cnblogs.com/shuchong/p/6074505.html

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

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

相关文章

Android App赞赏功能,微信公众号赞赏功能升级:作者可直接收到赞赏, iOS安卓均可用...

DoNews6月6日消息 (记者 费倩文)微信公众平台发布消息称&#xff0c;公众号赞赏功能升级为“喜欢作者”&#xff0c;开启了赞赏的文章在原创文章底部有“喜欢作者”的入口&#xff0c;作者可以直接收到读者赞赏&#xff0c;在 iOS 版和 Android 版微信上都可以使用。据了解&…

基于单片机的功放protues_基于Proteus的音频放大器电路设计与仿真详解.doc

毕 业 论 文学生姓名尹有友学 号171107078学院 物理与电子电气工程学院专 业电子信息工程题 目基于Proteus的音频放大电路设计与仿真指导教师付浩 副教授/学士2015年5月论文原创性声明内容本人郑重声明&#xff1a;本论文是我个人在导师指导下进行的研究工作及取得的研究成果。…

hashcode是什么意思_什么才是 Java 的基础知识?

作者&#xff1a;晓风轻链接&#xff1a;zhuanlan.zhihu.com/p/28615617近日里&#xff0c;很多人邀请我回答各种j2ee开发的初级问题&#xff0c;我无一都强调java初学者要先扎实自己的基础知识&#xff0c;那什么才是java的基础知识&#xff1f;又怎么样才算掌握了java的基础知…

BZOJ 1305 二分+网络流

思路&#xff1a; 建图我根本没有想到啊……. &#xff08;我是不会告诉你我借鉴了一下题解的思路&#xff09; 把每个人拆成喜欢的和不喜欢的点 男 喜欢 向 男 不喜欢 连 边权为k的边 如果男喜欢女 那么 男喜欢向 女喜欢 连 1 如果男 不喜欢女 那么 男不喜欢 向 女不喜欢 连1…

迄今最详细宇宙模型建成

来源&#xff1a;科技日报一个国际科研团队最近创建了迄今最详细的大尺度宇宙模型TNG50。这一虚拟宇宙“芳龄”约138亿岁、宽约2.3亿光年&#xff0c;包含数万个正处于演化中的星系&#xff0c;星系的细节程度与单星系模型中的相当。该模型跟踪了200多亿个代表暗物质、气体、恒…

Android仿qq网络不给力,《天天酷跑》qq授权失败网络不给力?解决_图文攻略_高分攻略_百度攻略...

问&#xff1a;天天酷跑qq授权失败网络不给力&#xff1f;有神门解决办法答&#xff1a;其实这个问题小编是没有出现过&#xff0c;大部分情况是因为网速的原因&#xff0c;然后小编重新登录一下一般就可以了&#xff0c;不知道小伙伴们为什么会一直显示qq授权失败网络不给力&a…

深入浅出的mysql第三版和第二版的区别_深入浅出mysql数据库开发(第二版)笔记...

第一部分&#xff1a;【基础篇】2.2.1&#xff1a;SQL分类1)DDL(Data Definition Languages): 数据定义语言常用语句&#xff1a;create&#xff0c;drop&#xff0c;alter 等2)DML(Data Manipulation Language):数据操作语句常用语句&#xff1a;insert&#xff0c;delete&…

python代码变成运行程序_python脚本转化单个exe执行程序

操作系统平台&#xff1a; Windows Server 2003 R2 Enterprise SP2 X86简体中文版 1.ActivePython-2.7.5.6-win32-x86.msi 2.setuptools-1.4.1 python setup.py install 3.distribute-0.6.49&#xff08;兼容性考虑&#xff0c;建议不要使用0.7.3&#xff09; python setup.py …

线程操作函数

线程的挂起和恢复 DWORD SuspendThread ( HANDLE hThread ); //挂起线程 DWORD ResumeThread ( HANDLE hThread ); //恢复线程 SuspendThread 和 ResumeThread 都返回之前的挂起计数。 一个线程最多可以挂起MAXIMUM_SUSPEND_COUNT (WinNT.h中定义为127次)。 进程的挂起和恢…

先进激光三维成像雷达技术的研究进展与趋势分析

本文内容转载自《激光杂志》2019年第5期&#xff0c;版权归《激光杂志》编辑部所有。杨兴雨&#xff0c;李晨&#xff0c;郝丽婷&#xff0c;王元庆&#xff0c;古丽孜热∙艾尼外南京大学&#xff0c;伊犁师范学院摘要&#xff1a;激光雷达具有体积小、质量轻、探测距离远、高分…

android 时间控件使用,android 时间控件的使用

一、样式文件time.xmlandroid:orientation"vertical" android:layout_width"match_parent"android:layout_height"match_parent">android:layout_width"wrap_content"android:layout_height"wrap_content"android:id&quo…

python工具箱查询手册书籍京东_十二. 项目实战:爬取京东商城中的书籍信息

爬取网址&#xff1a;https://search.jd.com/Search?keywordpython爬取信息&#xff1a;书名&#xff0c;价格&#xff0c;出版社&#xff0c;日期爬取方式&#xff1a;scrapy框架 splash存储方式&#xff1a;csv页面如下&#xff0c;可以看到python相关的图书超过6000本。不…

Android Binder 系统学习笔记(一)Binder系统的基本使用方法

1.什么是RPC&#xff08;远程过程调用&#xff09; Binder系统的目的是实现远程过程调用&#xff08;RPC&#xff09;&#xff0c;即进程A去调用进程B的某个函数&#xff0c;它是在进程间通信&#xff08;IPC&#xff09;的基础上实现的。RPC的一个应用场景如下&#xff1a; A进…

mongodb 监听不到端口_干货|MongoDB简单操作和通过python进行操作

点击上方“AI遇见机器学习”&#xff0c;选择“星标”公众号重磅干货&#xff0c;第一时间送达这次我们主要来简单的讨论一下在MongoDB中如何更新数据(修改数据)&#xff0c;删除数据&#xff0c;以及如何通过Python调用MongoDB。一、简单使用MongoDB操作数据| a.更新数据| i.数…

人工智能+脑机接口:让我们距离“增强人类”越来越近

来源&#xff1a;资本实验室前段时间&#xff0c;一则新闻引发了广泛争议&#xff1a;国内一所小学利用头环来监控孩子的脑电波&#xff0c;以判断孩子上课是否走神。暂且不论该事件是否是一场打着高科技幌子的闹剧&#xff0c;头环本身所代表的脑机接口技术正在受到越来越多的…

oracle常见单词_Oracle中常见的英语单词

fatal&#xff1a;重要的&#xff0c;致命的。常见于[rootdido1 ~]# ps -ef|grep init.cssdroot 2918 1 0 09:59? 00:00:00 /bin/sh /etc/init.d/init.cssd fatal-------------------------dependencies&#xff1a;附属的diagnostic&#xff1a;诊断常见于[rootdido1 client]…

哲学的未来

来源&#xff1a;哲学园作者&#xff1a;约翰R塞尔译者&#xff1a;GTY约翰塞尔生于1932年&#xff0c;当代著名哲学家&#xff0c;现为美国加州大学伯克利分校Slusser哲学教授&#xff0c;在语言哲学、心灵哲学和社会哲学领域贡献巨大&#xff0c;是目前在世的最著名的分析哲学…

怎么知道wx.config执行成功没_作为一个减肥40斤,且10年没反弹的普通人,这份瘦身经验分享给你...

“减肥”是女生老生常谈的话题&#xff0c;但是“减肥失败”、“越减越肥”也是很多女生面临的常态。所以做为成功减肥40斤且10多年没有反弹的人&#xff0c;我想来给大家一些自己的经验。很多姑娘知道减肥的关键因素是“热量差”&#xff0c;无论是增加运动&#xff0c;还是减…

nodejs 笔记

安装环境----------------------------------------------------------------1,安装nodejs 起步----------------------------------------------------------------1,cd 进目录2,npm init3,安装模块browsersync模块 #npm install browser-syncbrowser-sync start --server --…

html代码type,HTML中type是什么意思

在HTML中&#xff0c;type是类型的意思&#xff0c;是一个标签属性&#xff0c;主要用于定义标签元素的类型或文档(脚本)的MIME类型&#xff1b;例在input标签中type属性可以规定input元素的类型&#xff0c;在script标签中type属性可以规定脚本的MIME类型。推荐&#xff1a;ht…