关于微信小程序画布的开发(javascript微信小程序开发)

本文主要介绍微信小程序wxcanvas的开发实例以及相关注意事项。在此，我们将微信画布与H5画布进行对比，并说明注意事项。有需要的朋友可以参考一下。

微信小程序wxcanvas

测试手机为IPHONE6，开发者工具版本为0.10.102800。开发者版本0.11.112301也是如此。

微信小程序中的canvas和h5 canvas有很多区别。微信小程序的画布下面叫wxcanvas。

下面是我一点点测试的所有干货。请耐心等待:

1.wxcanvas和h5canvas不一样，有宽度和高度属性，还有宽度和高度的样式样式。他只有风格style，可以理解为框架。

2.不要把2.wxcanvas当成真正的H5canvas，就当是个P，画范围的东西也是存在的。改变宽度，高度就会显示出来，或者这里有重画，但不知道具体怎么实现；

3.改变wxcanvas的样式的宽度和高度并不改变原画布的大小；

4.4.css transform变换中的放大缩小不能改变原画布上事物的大小。

5.官方:context只是一个记录方法调用的容器，用来生成记录绘制行为的actions数组。使用上下文没有对应关系，一个上下文生成画布的绘制动作数组可以应用于多个

实际上，在context.getActions()之后，context中的信息将被清除。如果要复用，需要var temp=context.getActions()保存操作数组，然后才能复用为wx.drawcanvas；

注意

wx . draw canvas({ canvasId:& # 039；目标& # 039；，actions:context . get actions()})；

默认情况下，画布将被清空。你想清空它吗？

wx . draw canvas({ canvasId:& # 039；目标& # 039；，actions: context.getActions()，reserve:true })；

7.“聚焦”

& ltcanvas disable -scroll = & quot；true & quotcatchtouchmove = & quotccvsMove & quotbindtouchmove = & quotcvsMove & quotcan vas -id = & quot；目标& quotid = & quot目标& quotstyle = & # 039宽度:{ { width } } px身高:{ { height } } px & # 039& gt& lt/canvas & gt；

请注意，disable -scroll = & quot；true & quot和bindtouchmove = & quot。cvsMove & quot同时可以避免页面存在时的跟随，catchtouchmove做不到。

上面写的，ccvsMove和cvsMove都会触发，

CcvsMove返回普通的触摸事件对象，包括pageX、clientX等。

CvsMove返回canvasTouch事件对象，没有pageX，clientX，只有x，y。

8.

wx . draw canvas({ canvasId:& # 039；目标& # 039；，actions: []，reserve:false })；

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

9.当reserve:true时，画布的状态(如scale tranlate rotate)将跟随上一个状态。

10.context.getactions()返回的数组非常有用。如果你把它打印出来，你会发现你可以理解里面的一切。你可以直接修改数组来改变绘画的动作。

1.当wx。使用drawcanvas，context.drawImage可以在手机上画，但不能在电脑开发工具上画。

12.wx.canvasToTempFilePath

公文里只有一行字。事实证明

Wx.canvasToTempFilePath参数是包含canvasID、success、fail、complete的对象，类似于wx.saveFile

wx . canvastotempfilepath({ canvasId:& # 039；目标& # 039；，success:函数success(RES){ wx . save file({ tempfile path:RES . tempfile path，success:函数success(RES){ console . log(& # 039；已保存::& # 039；+RES . saved file path)；}，完成:函数fail(e){ console . log(e . errmsg)；} });}，complete:函数complete(e){ console . log(e . errmsg)；} });