微信 小程序 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 版微信上都可以使用。据了解&…

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多亿个代表暗物质、气体、恒…

线程操作函数

线程的挂起和恢复 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 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;头环本身所代表的脑机接口技术正在受到越来越多的…

哲学的未来

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

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

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

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

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

bzoj1085骑士精神(搜索)

1085: [SCOI2005]骑士精神 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1893 Solved: 1051Description 在一个55的棋盘上有12个白色的骑士和12个黑色的骑士&#xff0c; 且有一个空位。在任何时候一个骑士都能按照骑士的走法&#xff08;它可以走到和它横坐标相差为1&am…

中国2项上榜:《时代周刊》2019年度100大最佳发明榜单发布!

来源&#xff1a;Time导读&#xff1a;《时代周刊》最新评选出2019年度100大最佳发明&#xff01;这100项突破性的发明改变了我们的生活、工作、娱乐和思考方式&#xff0c;它们让世界变得更美好&#xff0c;更智能&#xff0c;或更有趣。今天分享其中的20个极具未来感的产品。…

html异形轮播,异形滚动

异形滚动效果图.gif1、原理的揭示前言&#xff1a;图片大小处理问题的解决&#xff0c;当我们只改变盒子大小&#xff0c;图片会溢出&#xff0c;无法充满这个盒子。设置图片的宽高为 100%异形滚动.box {width: 100px;height: 100px;}img { //让图片充满整个盒子width: 100%;he…

【周末阅读】工业互联网的发展历程及实现路径

来源&#xff1a;青岛智能产业技术研究院【导读】目前&#xff0c;我国工业互联网发展迅猛&#xff0c;从国家层面、部委层面、地方层面都在积极推动&#xff0c;国际上对工业互联网发展也比较关注。我主要介绍工业互联网的三个方面内容&#xff1a;工业互联网的基本认识、国内…

三菱fx5u编程手册_FX5U系列PLC控制伺服3种方式

FX5U系列PLC为三菱目前最新的小型PLC&#xff0c;机身小巧却功能强大&#xff0c;不仅保留了三菱小型PLC已有的优点&#xff0c;还吸收了大型PLC的开发理念&#xff0c;在整体性能上得到了很大的提高。本文以FX5U在控制伺服的性能上做个总结&#xff0c;归纳下FX5U控制伺服的3种…

[转人工智能工程师学习路线及具备的5项基本技能

原文地址&#xff1a;http://blog.csdn.net/BaiHuaXiu123/article/details/52478853 摘要 学习路线 你是否对机器学习充满兴趣呢?其实到目前为止&#xff0c;每天有越来越多的工程师开始将好奇的目光转向机器学习领域。实际上&#xff0c;你会发现现在没有哪一个领域比机器学习…

python牛顿迭代公式_python计算牛顿迭代多项式实例分析

本文实例讲述了python计算牛顿迭代多项式的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;p evalPoly(a,xData,x). Evaluates Newtons polynomial p at x. The coefficient vector a can be computed by the function coeffts. a coeffts(xData,yData). Computes…

“机器人迟钝一点,会更有人情味”,迪士尼提出新型人机交互系统

来源&#xff1a;机器人大讲堂导读打篮球时&#xff0c;当球向你飞来&#xff0c;你总会下意识地或者说有意识地伸手去接住球。生活中&#xff0c;有人递给你一个东西时&#xff0c;你也会伸手去接住&#xff0c;礼貌或者仓促地。那么在如今拟人机器人越发“聪明”的时代&#…