原始碼

• index.html
  
  

• <view class="container">
•     <!--畫布區域-->
•     <view class="canvas_area">
•         <!--注意：同一頁面中的 canvas-id 不可重複，如果使用一個已經出現過的 canvas-id，該 canvas 標籤對應的畫布將被隱藏並不再正常工作-->
•         <canvas canvas-id="myCanvas" class="myCanvas"
•             disable-scroll="false"
•             bindtouchstart="touchStart"
•             bindtouchmove="touchMove"
•             bindtouchend="touchEnd">
•         </canvas>
•     </view>
•     <!--畫布工具區域-->
•     <view class="canvas_tools">
•         <view class="box box1" bindtap="penSelect" data-param="5"></view>
•         <view class="box box2" bindtap="penSelect" data-param="15"></view>
•         <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
•         <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
•         <view class="box box5" bindtap="clearCanvas"></view>
•     </view>
• </view>
  
  

• 手指滑動程式碼
  
  

• //手指觸控動作開始
•   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('#F8F8F8') //設定線條樣式 此處設定為畫布的背景顏色  橡皮擦原理就是：利用擦過的地方被填充為畫布的背景顏色一致 從而達到橡皮擦的效果
•          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跟<canvas/>不存在對應關係，一個context生成畫布的繪製動作陣列可以應用於多個<canvas/>
•       wx.drawCanvas({
•          canvasId: 'myCanvas',
•          reserve: true,
•          actions: this.context.getActions() // 獲取繪圖動作陣列
•       })
•   }
  
  

2、橡皮擦的原理：之所以能擦掉畫布上的影象就是通過把要擦掉的區域繪製成與畫布一樣的顏色 這樣就可以”欺騙”自己的眼睛  達到橡皮擦的效果啦！！！