本文介绍了微信小程序canvas开发中的注意事项。

小程序开发教程专栏介绍canvas开发注意事项

微信小程序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: # 39；目标 # 39；，actions:context . get actions()})；默认情况下，画布将被清空。你想清空它吗？

wx . draw canvas({ canvasId: # 39；目标 # 39；，actions: context.getActions()，reserve:true })；7.“聚焦”

lt画布禁用-scroll = ；true catchtouchmove = ccvsMove bindtouchmove = cvsMove can vas -id = ；目标 id = 目标 style = # 39宽度:{ { width } } px身高:{ { height } } px # 39 gt lt/canvas gt；请注意，disable -scroll = ；true 和bindtouchmove = 。cvsMove 同时可以避免页面存在时的跟随，catchtouchmove做不到。

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

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

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

8.

wx . draw canvas({ canvasId: # 39；目标 # 39；，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: # 39；目标 # 39；，success:函数success(RES){ wx . save file({ tempfile path:RES . tempfile path，success:函数success(RES){ console . log( # 39；已保存:: # 39；+RES . saved file path)；}，完成:函数fail(e){ console . log(e . errmsg)；} });}，complete:函数complete(e){ console . log(e . errmsg)；} });以上就是微信小程序画布开发的注意事项细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：本文介绍了微信小程序canvas开发中的注意事项。 https://zhujicankao.com/81661.html