怎么用微信小程序的canvas組進行涂鴉

本篇內容介紹了“怎么用微信小程序的canvas組進行涂鴉”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

核心原理說明：

　　1、能畫出不同顏色的線條 主要是以下三個方法 setStrokeStyle(畫筆的顏色) moveTo(把路徑移動到畫布中的指定點，但不創建線條) lineTo(添加一個新點，然后在畫布中創建從該點到最后指定點的線條) 這樣就可以從A點坐標到B點坐標 畫出不同顏色的線條啦!!!

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

　　index.html

　　disable-scroll="false"

　　bindtouchstart="touchStart"

　　bindtouchmove="touchMove"

　　bindtouchend="touchEnd">

　　復制代碼

　　手指滑動代碼

　　//手指觸摸動作開始

　　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跟不存在對應關系，一個context生成畫布的繪制動作數組可以應用于多個

　　wx.drawCanvas({

　　canvasId: 'myCanvas',

　　reserve: true,

　　actions: this.context.getActions() // 獲取繪圖動作數組

　　})

　　}

　　復制代碼

　　以上是一部分代碼展示，下面做核心原理說明：

　　1、能畫出不同顏色的線條 主要是以下三個方法 setStrokeStyle(畫筆的顏色) moveTo(把路徑移動到畫布中的指定點，但不創建線條) lineTo(添加一個新點，然后在畫布中創建從該點到最后指定點的線條) 這樣就可以從A點坐標到B點坐標 畫出不同顏色的線條啦!!!

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

“怎么用微信小程序的canvas組進行涂鴉”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！