手把手教你微信小程序的canvas組進(jìn)行涂鴉
核心原理說(shuō)明:
1、能畫(huà)出不同顏色的線條 主要是以下三個(gè)方法 setStrokeStyle(畫(huà)筆的顏色) moveTo(把路徑移動(dòng)到畫(huà)布中的指定點(diǎn),但不創(chuàng)建線條) lineTo(添加一個(gè)新點(diǎn),然后在畫(huà)布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條) 這樣就可以從A點(diǎn)坐標(biāo)到B點(diǎn)坐標(biāo) 畫(huà)出不同顏色的線條啦!!!
2、橡皮擦的原理:之所以能擦掉畫(huà)布上的圖像就是通過(guò)把要擦掉的區(qū)域繪制成與畫(huà)布一樣的顏色 這樣就可以”欺騙”自己的眼睛 達(dá)到橡皮擦的效果啦!!!
index.html
disable-scroll="false"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd">
復(fù)制代碼
手指滑動(dòng)代碼
//手指觸摸動(dòng)作開(kāi)始
touchStart: function (e) {
//得到觸摸點(diǎn)的坐標(biāo)
this.startX = e.changedTouches[0].x
this.startY = e.changedTouches[0].y
this.context = wx.createContext()
if(this.isClear){ //判斷是否啟用的橡皮擦功能 ture表示清除 false表示畫(huà)畫(huà)
this.context.setStrokeStyle('#F8F8F8') //設(shè)置線條樣式 此處設(shè)置為畫(huà)布的背景顏色 橡皮擦原理就是:利用擦過(guò)的地方被填充為畫(huà)布的背景顏色一致 從而達(dá)到橡皮擦的效果
this.context.setLineCap('round') //設(shè)置線條端點(diǎn)的樣式
this.context.setLineJoin('round') //設(shè)置兩線相交處的樣式
this.context.setLineWidth(20) //設(shè)置線條寬度
this.context.save(); //保存當(dāng)前坐標(biāo)軸的縮放、旋轉(zhuǎn)、平移信息
this.context.beginPath() //開(kāi)始一個(gè)路徑
this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一個(gè)弧形路徑到當(dāng)前路徑,順時(shí)針繪制 這里總共畫(huà)了360度 也就是一個(gè)圓形
this.context.fill(); //對(duì)當(dāng)前路徑進(jìn)行填充
this.context.restore(); //恢復(fù)之前保存過(guò)的坐標(biāo)軸的縮放、旋轉(zhuǎn)、平移信息
}else{
this.context.setStrokeStyle(this.data.color)
this.context.setLineWidth(this.data.pen)
this.context.setLineCap('round') // 讓線條圓潤(rùn)
this.context.beginPath()
}
},
//手指觸摸后移動(dòng)
touchMove: function (e) {
var startX1 = e.changedTouches[0].x
var startY1 = e.changedTouches[0].y
if(this.isClear){ //判斷是否啟用的橡皮擦功能 ture表示清除 false表示畫(huà)畫(huà)
this.context.save(); //保存當(dāng)前坐標(biāo)軸的縮放、旋轉(zhuǎn)、平移信息
this.context.moveTo(this.startX,this.startY); //把路徑移動(dòng)到畫(huà)布中的指定點(diǎn),但不創(chuàng)建線條
this.context.lineTo(startX1,startY1); //添加一個(gè)新點(diǎn),然后在畫(huà)布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條
this.context.stroke(); //對(duì)當(dāng)前路徑進(jìn)行描邊
this.context.restore() //恢復(fù)之前保存過(guò)的坐標(biāo)軸的縮放、旋轉(zhuǎn)、平移信息
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;
}
//只是一個(gè)記錄方法調(diào)用的容器,用于生成記錄繪制行為的actions數(shù)組。context跟不存在對(duì)應(yīng)關(guān)系,一個(gè)context生成畫(huà)布的繪制動(dòng)作數(shù)組可以應(yīng)用于多個(gè)
wx.drawCanvas({
canvasId: 'myCanvas',
reserve: true,
actions: this.context.getActions() // 獲取繪圖動(dòng)作數(shù)組
})
}
復(fù)制代碼
以上是一部分代碼展示,下面做核心原理說(shuō)明:
1、能畫(huà)出不同顏色的線條 主要是以下三個(gè)方法 setStrokeStyle(畫(huà)筆的顏色) moveTo(把路徑移動(dòng)到畫(huà)布中的指定點(diǎn),但不創(chuàng)建線條) lineTo(添加一個(gè)新點(diǎn),然后在畫(huà)布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條) 這樣就可以從A點(diǎn)坐標(biāo)到B點(diǎn)坐標(biāo) 畫(huà)出不同顏色的線條啦!!!
2、橡皮擦的原理:之所以能擦掉畫(huà)布上的圖像就是通過(guò)把要擦掉的區(qū)域繪制成與畫(huà)布一樣的顏色 這樣就可以”欺騙”自己的眼睛 達(dá)到橡皮擦的效果啦!!!
以上就是如何使用微信小程序的canvas組進(jìn)行涂鴉的全部?jī)?nèi)容了,大家都學(xué)會(huì)了嗎?更多小程序開(kāi)發(fā)入門(mén)。
第二部分:如何開(kāi)通一個(gè)小商店