這篇文章將為大家詳細(xì)講解有關(guān)怎么在微信小程序中實(shí)現(xiàn)一個(gè)涂鴉功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

目前成都創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、鎮(zhèn)平網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

布局文件index.wxml：

邏輯功能文件index.js：

Page({
 data:{
  pen : 3, //畫(huà)筆粗細(xì)默認(rèn)值
  color : '#cc0033' //畫(huà)筆顏色默認(rèn)值
 },
 startX: 0, //保存X坐標(biāo)軸變量
 startY: 0, //保存X坐標(biāo)軸變量
 isClear : false, //是否啟用橡皮擦標(biāo)記
 //手指觸摸動(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è)置線(xiàn)條樣式 此處設(shè)置為畫(huà)布的背景顏色 橡皮擦原理就是：利用擦過(guò)的地方被填充為畫(huà)布的背景顏色一致 從而達(dá)到橡皮擦的效果 
     this.context.setLineCap('round') //設(shè)置線(xiàn)條端點(diǎn)的樣式
     this.context.setLineJoin('round') //設(shè)置兩線(xiàn)相交處的樣式
     this.context.setLineWidth(20) //設(shè)置線(xiàn)條寬度
     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') // 讓線(xiàn)條圓潤(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)建線(xiàn)條
    this.context.lineTo(startX1,startY1); //添加一個(gè)新點(diǎn)，然后在畫(huà)布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線(xià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ù)組
   })
 },
 //手指觸摸動(dòng)作結(jié)束
 touchEnd: function () {
 },
 //啟動(dòng)橡皮擦方法
 clearCanvas: function(){
   if(this.isClear){
    this.isClear = false;
   }else{
    this.isClear = true;
   }
 },
 penSelect: function(e){ //更改畫(huà)筆大小的方法
  console.log(e.currentTarget);
  this.setData({pen:parseInt(e.currentTarget.dataset.param)});
  this.isClear = false;
 },
 colorSelect: function(e){ //更改畫(huà)筆顏色的方法
  console.log(e.currentTarget);
  this.setData({color:e.currentTarget.dataset.param});
  this.isClear = false;
 }
})

關(guān)于怎么在微信小程序中實(shí)現(xiàn)一個(gè)涂鴉功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。