小程序 canvas 实时画笔 卡顿 解决方案

canvas多次绘制后 画布会越来越卡。官网新出了 type 2d 没用过 不知道性能如何

以一个简单的写字板为例 代码如下：

<canvas style="height: 1200rpx ; width:100vw" 
    canvas-id="myCanvas" 
    bindtouchstart="touchStart" 
    bindtouchmove="touchMove" 
    bindtouchend="touchEnd"/>

js 逻辑

Page({
    data: {
        currentColor:'#333'

    },
    onReady: function() {
        this.begin = false;
        this.startX = 0;
        this.startY = 0;
        this.context = wx.createCanvasContext('myCanvas')

    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {


    },


    touchStart: function (e) {
        this.lineBegin(e.touches[0].x, e.touches[0].y)
    },

    // 绘制中 手指在屏幕上移动
    touchMove: function (e) {
        if (this.begin) {
            this.lineAddPoint(e.touches[0].x, e.touches[0].y);
            this.context.draw(true);
        }
    },

    // 绘制结束 手指抬起
    touchEnd: function () {
        this.lineEnd();
    },
     // 绘制线条结束
    lineEnd: function () {
        this.context.closePath();
        this.begin = false;
    },


     // 开始绘制线条
    lineBegin: function (x, y) {
        this.begin = true;
        this.context.beginPath()
        this.startX = x;
        this.startY = y;
        this.context.moveTo(this.startX, this.startY)
        this.lineAddPoint(x, y);
    },
      // 绘制线条中间添加点
    lineAddPoint: function (x, y) {
        this.context.moveTo(this.startX, this.startY)
        this.context.lineTo(x, y)
        this.context.stroke();
        this.startX = x;
        this.startY = y;
    },

})