小程序使用canvas在页面初始化时,部分手机会有几率卡死?
<canvas class="hand-writing" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove" bindtouchend="uploadScaleEnd" canvas-id="handWriting">
const app = getApp()
let pix = 5;
let tempPath = [];
Page({
data: {
penColor: 'black',
lineWidth: 1.2,
ifLay: false,
isEmpty: true,
apiUrl:'',
uuid: '',
isChecked:false,
busId:'',
resId:'',
faceAuthId:'',
signFileId:[],
shareholderId:'',
conferenceId: '',
authType: '',
faceVerifyId: '',
oppositionReason:'',
time:0,
busApplId:'',
videoStatus:'',
signAuthId:'',
type:'4',
busFile: null,
timer:1800,
singTimer:'',
ctx:null,
paths: [], // 路径二维数组
strokeWidth:5,
i:'',
signerId:'',
rncId: '',
faceId: '',
applLen:''
},
onLoad: function (options) {
let ctx = wx.createCanvasContext('handWriting');
// ctx.setFillStyle('transparent')
// ctx.fillRect(0, 0, 1000, 1000)
ctx.setLineWidth(this.data.strokeWidth)
// ctx.draw()
this.setData({
ctx
})
},
radiochange(){
this.setData({
isChecked: !this.data.isChecked
})
},
uploadScaleStart(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
};
tempPath = [point];
},
uploadScaleMove(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
};
tempPath.push(point)
let ctx = this.data.ctx;
ctx.moveTo(tempPath[tempPath.length - 2].x, tempPath[tempPath.length - 2].y)
ctx.setLineCap('round')
// ctx.setLineJoin('round')
ctx.lineTo(point.x, point.y)
ctx.stroke()
ctx.draw(true)
},
uploadScaleEnd: function (e) {
let paths = this.data.paths;
paths.push(tempPath);
tempPath = [];
// 利用临时数组来记录轨迹,最后保留,解决频繁setData导致性能急剧下降的问题
this.setData({
paths
})
}
})