小程序canvas渲染慢

题主是否想问小程序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); }});

最近在微信小程序开发中需要用到canvas绘制中国象棋的的棋盘棋子，该需求用来复盘对弈记录，由于复盘的每一步都是用fen串 （参考：FEN文件格式） 来转换出所有棋子的位置，所以每一步都会将棋子重新绘制一遍，为了避免显示上一次步绘制i的内容需要先清空canvas再绘制新的棋子，清空和重新绘制的过程就会出现闪屏的现象，所以每次点上一步下一步的时候都会闪一下，体验很不好。

为了解决这个问题，搜索了一些解决方案，最终决定参考双缓存 《在Canvas clearRect中引起的闪屏怎么解决？双缓存解决闪屏问题详解！》 的方式解决这个问题。

由于棋子元素过多，每一颗棋子都要调用一次drawImage，且新版的canvas是异步进行的，如果不采用缓存的方式，看起来不仅有闪烁的现象还会有一种棋子一个一个出现的感觉。现将内容绘制好生成，在另一个canvas中只需要绘制这一张并覆盖之前的内容，而不需要清空，这样就避免了闪屏的问题。

效果对比：

如果有更好的方案，请不吝赐教。

<view class="container">

<!--画布区域-->

<view class="canvas_area">

<!--注意：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作-->

<canvas canvas-id="myCanvas" class="myCanvas"

disable-scroll="false"

bindtouchstart="touchStart"

bindtouchmove="touchMove"

bindtouchend="touchEnd">

</canvas>

</view>

<!--画布工具区域-->

<view class="canvas_tools">

<view class="box box1" bindtap="penSelect" data-param="5"></view>

<view class="box box2" bindtap="penSelect" data-param="15"></view>

<view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>

<view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>

<view class="box box5" bindtap="clearCanvas"></view>

</view>

</view>

手指滑动代码

//手指触摸动作开始

touchStart: function (e) {

//得到触摸点的坐标

thisstartX = echangedTouches[0]x

thisstartY = echangedTouches[0]y

thiscontext = wxcreateContext()

if(thisisClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画

thiscontextsetStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果

thiscontextsetLineCap('round') //设置线条端点的样式

thiscontextsetLineJoin('round') //设置两线相交处的样式

thiscontextsetLineWidth(20) //设置线条宽度

thiscontextsave(); //保存当前坐标轴的缩放、旋转、平移信息

thiscontextbeginPath() //开始一个路径

thiscontextarc(thisstartX,thisstartY,5,0,2MathPI,true); //添加一个弧形路径到当前路径，顺时针绘制 这里总共画了360度 也就是一个圆形

thiscontextfill(); //对当前路径进行填充

thiscontextrestore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息

}else{

thiscontextsetStrokeStyle(thisdatacolor)

thiscontextsetLineWidth(thisdatapen)

thiscontextsetLineCap('round') // 让线条圆润

thiscontextbeginPath()

}

},

//手指触摸后移动

touchMove: function (e) {

var startX1 = echangedTouches[0]x

var startY1 = echangedTouches[0]y

if(thisisClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画

thiscontextsave(); //保存当前坐标轴的缩放、旋转、平移信息

thiscontextmoveTo(thisstartX,thisstartY); //把路径移动到画布中的指定点，但不创建线条

thiscontextlineTo(startX1,startY1); //添加一个新点，然后在画布中创建从该点到最后指定点的线条

thiscontextstroke(); //对当前路径进行描边

thiscontextrestore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息

thisstartX = startX1;

thisstartY = startY1;

}else{

thiscontextmoveTo(thisstartX, thisstartY)

thiscontextlineTo(startX1, startY1)

thiscontextstroke()

thisstartX = startX1;

thisstartY = startY1;

}

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

wxdrawCanvas({

canvasId: 'myCanvas',

reserve: true,

actions: thiscontextgetActions() // 获取绘图动作数组

})

}

在小程序中，Canvas 组件是一个用于绘制图形的画布组件，它可以让开发者在画布上绘制图形、添加事件等 *** 作。如果画布的高度大于屏幕高度，并且没有进行特殊设置或调整，那么在小程序中是无法遮挡系统底部导航的。

需要注意的是，小程序的底部导航条是系统自带的组件，在小程序中无法直接修改或遮挡。如果你需要使用自定义的导航条，可以考虑使用小程序的自定义组件或自己实现相应的功能。

如果确实需要在小程序中遮挡系统底部导航，可以考虑以下几种方法：

1 调整画布高度

可以通过代码动态调整 Canvas 画布的高度，使得画布高度不超过屏幕高度，从而避免遮挡底部导航。例如，可以获取屏幕高度并设置画布高度为屏幕高度减去一定的偏移量。

2 建立全屏页面

可以把绘制画布的页面作为一个全屏页面，并在该页面中隐藏系统底部导航条，从而实现遮挡底部导航的效果。需要注意的是，这种方法可能会影响用户体验，并且需要保证用户能够方便地返回到其他页面。

3 使用小程序组件库

一些小程序组件库可能提供了类似于 Canvas 的绘图组件，并且可以支持遮挡系统底部导航的功能，可以尝试使用这些组件库中提供的组件实现相应的效果。

总之，需要根据具体的业务需求和实际情况选择合适的方法来实现相应的效果。

以上就是关于小程序canvas渲染慢全部的内容，包括:小程序canvas渲染慢、微信小程序能用canvas吗、小程序Canvas闪屏处理等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！