微信小程序Canvas隐藏 不影响canvas绘图处理办法

小程序canvas生成转发图时需要canvas隐藏 不能使用 display:none; hidden属性 加上后canvas不能绘图

网上的方法都试过了 都不行最后自己实现了 但是不能进行翻页，有更好的方法欢迎提供 万谢

最先试过这个方法 外层套view ,width height都设为0 模拟器生效 真机不生效

后来查到了 可通过cover-view 自定义view标签 进行遮盖

然后发现真机上 cover-view 按下后带有灰色背景 最后想直接定位到屏外 页面禁止滑动 最后成了

json中加入

最后是行了 反正页面就两按钮不需要滑动， 求更好的方法实现

参考文章： 微信小程序 canvas 绘图问题总结

公司提了压缩的需求，在网上查了些资料，用canvas实现了，但发现使用wxcanvasToTempFilePath如果只是打印地址然后点击地址查看，或者保存至相册再查看，拿到的就是正常的，但我如果要在压缩后的success回调中使用去做一些事情（比如编码wxgetFileSystemManager()readFile、上传至服务器wxrequest），拿到的就是空白的。

经过多次调试后发现，是这里的问题

这里需要设置的多一点。我之前设置的100，即100ms，可能因为上传至服务器是异步的，导致100ms内canvas没法完成加载 *** 作，生成的就是空白的。改成1000之后，有足够长的时间渲染，就不会出现空白的问题了。

题主是否想问小程序canvas渲染慢方法。画面复杂：如果小程序canvas中的画面比较复杂，包含大量的图形、文本和动画等，可能会导致渲染速度变慢。解决方法可以是优化canvas的绘制逻辑，减少不必要的绘制 *** 作，或者将画面拆分为多个图层进行绘制，以提高渲染效率。

1、过大：如果小程序canvas中使用了过大的，也会影响渲染速度。解决方法可以是对进行压缩，或者使用小尺寸的进行绘制。

2、不合理的动画：如果小程序canvas中存在复杂的动画效果，比如粒子动画、路径动画等，也会影响渲染速度。解决方法可以是使用更简单的动画效果，或者使用硬件加速进行渲染。

3、设备性能不足：如果小程序运行的设备性能较低，也会导致canvas渲染速度变慢。解决方法可以是优化canvas的绘制逻辑，减少不必要的绘制 *** 作，或者在运行时提示用户升级设备或换用更高性能的设备。

4、他因素：还有一些其他因素也可能会导致小程序canvas渲染慢，比如网络延迟、内存占用过高等。解决方法可以是优化网络请求、减少内存占用等。

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

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

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

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

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

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

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

实际上，contextgetActions()后，context中的信息会被清空，如果想重复利用，需要var temp=contextgetActions()将 *** 作数组保存下来，才可重复用于wxdrawcanvas；

6注意

wxdrawCanvas({canvasId: 'target',actions: contextgetActions()});

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

wxdrawCanvas({ canvasId: 'target', actions: contextgetActions(), 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

wxdrawCanvas({ canvasId: 'target', actions: [], reserve:false});

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

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

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

11wxdrawCanvas时contextdrawImage在手机上可以画出来，在电脑开发工具上画不出来

12wxcanvasToTempFilePath

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

wxcanvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wxsaveFile差不多；wxcanvasToTempFilePath({ canvasId: 'target', success: function success(res) { wxsaveFile({ tempFilePath: restempFilePath, success: function success(res) { consolelog('saved::' + ressavedFilePath); }, complete: function fail(e) { consolelog(eerrMsg); } }); }, complete: function complete(e) { consolelog(eerrMsg); }});

描述：在页面加载是使用canvasdrawImage画图，点击页面下面按钮在已绘制好的图形上继续画图。使用ctxdraw()弄了多次，均会把之前的图清掉重新绘制，看文档得知，在ctxdraw()时，传入参数true即可保存原来绘制的图，在此记录一下。

详见如下：

canvas使用：

indexwxml中

js中

以上就是关于微信小程序Canvas隐藏 不影响canvas绘图处理办法全部的内容，包括:微信小程序Canvas隐藏 不影响canvas绘图处理办法、微信小程序 canvas生成图片是空白的、小程序canvas渲染慢等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！