• 首先寫好觸摸開始, 觸摸移動(dòng), 結(jié)束觸摸事件

        <canvas disable-scroll="true" canvas-id="drawline" class="board" @touchstart="handtouchstart" @touchmove="handtouchmove"
         @touchend="handtouchend">
        </canvas>

• 定義全局接收變量

       data() {
            return {
                x: 0, // 渠道開始和移動(dòng)位置
                y: 0,
                newx: 0,
                newy: 0
            }
        },

• 創(chuàng)建 canvas 繪圖上下文

var ctx = uni.createCanvasContext('drawline')

• 獲取到用戶的手勢(shì)點(diǎn)擊x, y軸位置

            // 觸摸開始
            handtouchstart(e) {
                let startX = e.changedTouches[0].x;
                let startY = e.changedTouches[0].y;
                this.x = startX;
                this.y = startY;
            },

• 獲取用戶的觸摸移動(dòng)位置, 并根據(jù)位置進(jìn)行繪制

            // 觸摸移動(dòng)
            handtouchmove(e) {
                let moveX = e.changedTouches[0].x;
                let moveY = e.changedTouches[0].y;
                this.newx = moveX;
                this.newy = moveY;
                ctx.setLineWidth(10); // 劃線多粗
                ctx.setLineCap('round'); // 不中斷
                ctx.setStrokeStyle('red')
                ctx.moveTo(this.x, this.y)
                ctx.lineTo(this.newx, this.newy)
                ctx.stroke()
                ctx.draw(true) // 保存繪畫內(nèi)容
                this.x = moveX
                this.y = moveY
                this.main(this.x, this.y);
            },

• 結(jié)束觸摸 可清空原本繪制的圖像 也可不

            // 結(jié)束觸摸
            handtouchend(e) {
                ctx.draw() // 清空
            },