這個demo，應該是作者的練習demo，表面上並沒有展示完全；

結構圖：

其中微信塗鴉部分預覽圖：

其中微信塗鴉部分預覽圖：

示例程式碼：

Page({

 data:{

   pen : 3, //畫筆粗細預設值

   color : '#cc0033' //畫筆顏色預設值

 },

 startX: 0, //儲存X座標軸變數

 startY: 0, //儲存Y座標軸變數

 isClear : false, //是否啟用橡皮擦標記

 //手指觸控動作開始

 touchStart: function (e) {

     //得到觸控點的座標

     this.startX = e.changedTouches[0].x

     this.startY = e.changedTouches[0].y

     this.context = wx.createContext()

     if(this.isClear){ //判斷是否啟用的橡皮擦功能  ture表示清除  false表示畫畫

        this.context.setStrokeStyle('#FFFFFF') //設定線條樣式 此處設定為畫布的背景顏色  橡皮擦原理就是：利用擦過的地方被填充為畫布的背景顏色一致 從而達到橡皮擦的效果

        this.context.setLineCap('round') //設定線條端點的樣式

        this.context.setLineJoin('round') //設定兩線相交處的樣式

        this.context.setLineWidth(20) //設定線條寬度

        this.context.save();  //儲存當前座標軸的縮放、旋轉、平移資訊

        this.context.beginPath() //開始一個路徑

        this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true);  //新增一個弧形路徑到當前路徑，順時針繪製  這裡總共畫了360度  也就是一個圓形

        this.context.fill();  //對當前路徑進行填充

        this.context.restore();  //恢復之前儲存過的座標軸的縮放、旋轉、平移資訊

     }else{

        this.context.setStrokeStyle(this.data.color)

        this.context.setLineWidth(this.data.pen)

        this.context.setLineCap('round') // 讓線條圓潤

        this.context.beginPath()

     }

 },

 //手指觸控後移動

 touchMove: function (e) {

     var startX1 = e.changedTouches[0].x

     var startY1 = e.changedTouches[0].y

     if(this.isClear){ //判斷是否啟用的橡皮擦功能  ture表示清除  false表示畫畫

       this.context.save();  //儲存當前座標軸的縮放、旋轉、平移資訊

       this.context.moveTo(this.startX,this.startY);  //把路徑移動到畫布中的指定點，但不建立線條

       this.context.lineTo(startX1,startY1);  //新增一個新點，然後在畫布中建立從該點到最後指定點的線條

       this.context.stroke();  //對當前路徑進行描邊

       this.context.restore()  //恢復之前儲存過的座標軸的縮放、旋轉、平移資訊

       this.startX = startX1;

       this.startY = startY1;

     }else{

       this.context.moveTo(this.startX, this.startY)

       this.context.lineTo(startX1, startY1)

       this.context.stroke()

       this.startX = startX1;

       this.startY = startY1;

     }

     //只是一個記錄方法呼叫的容器，用於生成記錄繪製行為的actions陣列。context跟不存在對應關係，一個context生成畫布的繪製動作陣列可以應用於多個

     wx.drawCanvas({

        canvasId: 'myCanvas',

        reserve: true,

        actions: this.context.getActions() // 獲取繪圖動作陣列

     })

 },

 //手指觸控動作結束

 touchEnd: function () {

 },

 //啟動橡皮擦方法

 clearCanvas: function(){

     if(this.isClear){

       this.isClear = false;

     }else{

       this.isClear = true;

     }

 },

 penSelect: function(e){ //更改畫筆大小的方法

   console.log(e.currentTarget);

   this.setData({pen:parseInt(e.currentTarget.dataset.param)});

   this.isClear = false;

 },

 colorSelect: function(e){ //更改畫筆顏色的方法

   console.log(e.currentTarget);

   this.setData({color:e.currentTarget.dataset.param});

   this.isClear = false;

 },

 // 下拉重新整理

 onPullDownRefresh: function(){

   wx.stopPullDownRefresh()

 },

 // 頁面分享

 onShareAppMessage: function () {

   return {

     title: '微信小程式',

     desc: '這是微信小程式的分享功能',

     path: '/page/canvas'

   }

 }

})

文章來自：微信小程式