该项目使用uni-app
1、由于微信小程序使用canvas如果过多调用draw()方法【绘制点，线等】，会导致绘制出现延时问题，所以在保证同一时间所绘制的点不要太多的情况下进行绘制，避免出现卡顿；
2、在1的基础上，如果反复在canvas上绘制，当绘制足够多的情况下仍然会出现卡顿的情况，这情况下就重新在当前界面绘制的图形生成图片路径canvasToTempFilePath，然后绘制drawImage。
vue代码
<canvas class="handWriting " disable-scroll="true" @touchstart="uploadScaleStart"
@touchmove="uploadScaleMove" @touchend="uploadScaleEnd" @tap="mouseDown" :canvas-id="canvasName">
</canvas>
js 代码
// 笔迹结束
uploadScaleEnd(e) {
this.canvasToTempFilePath()
},
canvasToTempFilePath(success, error) {
var that = this;
uni.canvasToTempFilePath({
canvasId: this.canvasName,
success: (res) => {
if (success) {
success(res.tempFilePath);
}
that.drawCacheImage(res.tempFilePath);
},
fail: (res) => {
console.log(res)
if (error) {
error(res)
}
},
complete: (res) => {
console.log(res)
}
}, this);
},
drawCacheImage(path,canvasName){
var ctx = this.ctx;
ctx.drawImage(path, 0, 0, this.canvasWidth, this.canvasHeight);
ctx.draw();
}
当然可以使用两个canvas 进行缓存绘制，然后控制z-index来切换显示图层，但是在小程序上会看到明显的闪屏现象，因此两个canvas文案有点缺陷
