小程序开发中的wxcanvas是什么

  介绍

这篇文章将为大家详细讲解有关小程序开发中的wxcanvas是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

测试手机为IPHONE6,开发者工具版本0.10.102800

微信小程序里的帆布非代替帆布有很多不一样的地方,以下把微信小程序的帆布叫做wxcanvas

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

1. wxcanvas,不像h6canvas那样有宽度和高度属性和宽度和高度的风格样式。他只有风格样式,可以理解为他就是个框吧。

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

3。改变wxcanvas的样式的宽度,高度,并不改为原画布上的东西的大小;

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

5。官方说法:上下文只是一个记录方法调用的容器,用于生成记录绘制行为的操作数组.context跟& lt;帆布/祝辞不存在对应关系,一个上下文生成画布的绘制动作数组可以应用于多个& lt;帆布/祝辞。

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

6。注意

wx.drawCanvas ({   canvasId: & # 39;目标# 39;   行动:context.getActions ()   });

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

wx.drawCanvas ({   ,,,canvasId:, & # 39;目标# 39;   ,,,的行动:,context.getActions (),   ,才能储备:没错   });

<强> 7。《重点》

& lt; canvas  disable-scroll=皌rue", catchtouchmove=癱cvsMove", bindtouchmove=癱vsMove", canvas-id=皌arget", id=皌arget",风格=& # 39;宽度:{{宽度}}px;高度:{{高度}}px # 39;祝辞& lt;/canvas>

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

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

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

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

8。

 wx.drawCanvas ({
  ,,,canvasId:, & # 39;目标# 39;
  ,,,的行动:,[],
  ,,,储备:假的
  });

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

9。画布的规模tranlate旋转等状态,在储备:真时会接着上次的状态

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

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

12.的天气。canvasToTempFilePath

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

wx.canvasToTempFilePath参数为一个对象包括canvasID,成功,失败,完成,和天气。saveFile差不多;

小程序开发中的wxcanvas是什么

,,,,,,,,,,,,wx.canvasToTempFilePath ({   ,,,,,,,,,,,,,canvasId:, & # 39;目标# 39;   ,,,,,,,,,,,,,成功:,function 成功(res), {   ,,,,,,,,,,,,,,,wx.saveFile ({   ,,,,,,,,,,,,,,,,,tempFilePath:, res.tempFilePath,   ,,,,,,,,,,,,,,,,,成功:,function 成功(res), {   ,,,,,,,,,,,,,,,,,,,console.log(& # 39;保存:& # 39;,+,res.savedFilePath);   ,,,,,,,,,,,,,,,,,},   ,,,,,,,,,,,,,,,,,完成:,function 失败(e), {   ,,,,,,,,,,,,,,,,,,,console.log (e.errMsg);   ,,,,,,,,,,,,,,,,,}   ,,,,,,,,,,,,,,,});   ,,,,,,,,,,,,,},   ,,,,,,,,,,,,,完成:,function 完成(e), {   ,,,,,,,,,,,,,,,console.log (e.errMsg);   ,,,,,,,,,,,,,}   ,,,,,,,,,,,});

关于“小程序开发中的wxcanvas是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

小程序开发中的wxcanvas是什么