效果图如下：
画布视频演示点我 部分代码如下 // 笔迹开始 uploadScaleStart(e) { if (e.type != 'touchstart') return false; let ctx = this.data.ctx; ctx.setFillStyle(this.data.lineColor); // 初始线条设置颜色 ctx.setGlobalAlpha(this.data.transparent); // 设置半透明 let currentPoint = { x: e.touches[0].x, y: e.touches[0].y } let currentLine = this.data.currentLine; currentLine.unshift({ time: new Date().getTime(), dis: 0, x: currentPoint.x, y: currentPoint.y }) this.setData({ currentPoint, // currentLine }) if (this.data.firstTouch) { this.setData({ cutArea: { top: currentPoint.y, right: currentPoint.x, bottom: currentPoint.y, left: currentPoint.x }, firstTouch: false }) } this.pointToLine(currentLine); }, // 笔迹移动 uploadScaleMove(e) { if (e.type != 'touchmove') return false; if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } let point = { x: e.touches[0].x, y: e.touches[0].y } //测试裁剪 if (point.y < this.data.cutArea.top) { this.data.cutArea.top = point.y; } if (point.y < 0) this.data.cutArea.top = 0; if (point.x > this.data.cutArea.right) { this.data.cutArea.right = point.x; } if (this.data.canvasWidth - point.x <= 0) { this.data.cutArea.right = this.data.canvasWidth; } if (point.y > this.data.cutArea.bottom) { this.data.cutArea.bottom = point.y; } if (this.data.canvasHeight - point.y <= 0) { this.data.cutArea.bottom = this.data.canvasHeight; } if (point.x < this.data.cutArea.left) { this.data.cutArea.left = point.x; } if (point.x < 0) this.data.cutArea.left = 0; this.setData({ lastPoint: this.data.currentPoint, currentPoint: point }) let currentLine = this.data.currentLine currentLine.unshift({ time: new Date().getTime(), dis: this.distance(this.data.currentPoint, this.data.lastPoint), x: point.x, y: point.y }) // this.setData({ // currentLine // }) this.pointToLine(currentLine); }, // 笔迹结束 uploadScaleEnd(e) { if (e.type != 'touchend') return 0; let point = { x: e.changedTouches[0].x, y: e.changedTouches[0].y } this.setData({ lastPoint: this.data.currentPoint, currentPoint: point }) let currentLine = this.data.currentLine currentLine.unshift({ time: new Date().getTime(), dis: this.distance(this.data.currentPoint, this.data.lastPoint), x: point.x, y: point.y }) if (currentLine.length > 2) { var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length; //$("#info").text(info.toFixed(2)); } //一笔结束，保存笔迹的坐标点，清空，当前笔迹 //增加判断是否在手写区域； this.pointToLine(currentLine); var currentChirography = { lineSize: this.data.lineSize, lineColor: this.data.lineColor }; var chirography = this.data.chirography chirography.unshift(currentChirography); this.setData({ chirography }) var linePrack = this.data.linePrack linePrack.unshift(this.data.currentLine); this.setData({ linePrack, currentLine: [] }) },欢迎共同研究探讨（wx）
