微信小程序_(組件)canvas畫布

 

 

 canvas畫布效果　　官方文檔：傳送門

 

 

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // 使用 wx.createContext 獲取繪圖上下文 context
    var context = wx.createCanvasContext('firstCanvas')

    //設置畫筆的顏色
    context.setStrokeStyle("#00ff00")
    //設置線寬為5個像素
    context.setLineWidth(5)
    //左上角坐標(0，0)長寬200
    context.rect(0, 0, 200, 200)
    //對上面定義動作進行繪制
    context.stroke()

    context.setStrokeStyle("#ff0000")
 
    context.setLineWidth(2)
    //移動畫筆的位置到(160,100)
    context.moveTo(160, 100)
    //左上角坐標(100，100)，半徑為60，起始角度0°，終止角度2π，順時針繪制
    context.arc(100, 100, 60, 0, 2 * Math.PI, false)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  }
})

 

Gary 微信小程序
<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"></canvas>
</view>

 

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

 

實現過程

 

　　canvas-id 　　canvas 組件的唯一標識符

　　同一頁面中的 canvas-id 不可重復，如果使用一個已經出現過的 canvas-id，該 canvas 標簽對應的畫布將被隱藏並不再正常工作

 

定義畫布樣式

<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"></canvas>
</view>

 

在JS中添加onReady: function()函數(dom加載完成后執行的函數)

 

　　繪制矩形

    //設置畫筆的顏色
    context.setStrokeStyle("#00ff00")
    //設置線寬為5個像素
    context.setLineWidth(5)
    //左上角坐標(0，0)長寬200
    context.rect(0, 0, 200, 200)
    //對上面定義動作進行繪制
    context.stroke()

 

　　繪制四個圓

    context.setStrokeStyle("#ff0000")
 
    context.setLineWidth(2)
    //移動畫筆的位置到(160,100)
    context.moveTo(160, 100)
    //坐標原點(100，100)，半徑為60，起始角度0°，終止角度2π，順時針繪制
    context.arc(100, 100, 60, 0, 2 * Math.PI, false)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()

 

 context.arc(100, 100, 60, 0, 2 * Math.PI, false)

　　第六個參數，當參數為true時畫筆順時針繪制，為false時逆時針繪制

 

繪制移動的圖形效果

 

 

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },

  pos:{
    x:0,
    y:0
  },

  onReady: function (e) {
    this.draw()
  },

  btnclick:function(){
    setInterval(this.draw,10)
  },

  draw:function(){

    this.pos.x++;
    this.pos.y++;
    // 使用 wx.createContext 獲取繪圖上下文 context
    var context = wx.createCanvasContext('firstCanvas')

   
    //左上角坐標(100，100)，半徑為60，起始角度0°，終止角度2π，順時針繪制
    context.arc(this.pos.x, this.pos.y, 60, 0, 2 * Math.PI, false)

    context.stroke()
    context.draw()
  }
})

 

Gary 微信小程序
<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"
  bindtouchstart="btnclick"></canvas>
</view>

 

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

 

實現過程

 

　　在text.wxml中綁定手指點擊事件bindtouchstart="btnclick"

bindtouchstart            手指觸摸動作開始
bindtouchmove            手指觸摸后移動
bindtouchend            手指觸摸動作結束
bindtouchcancel            手指觸摸動作被打斷，如來電提醒，彈窗
bindlongtap            手指長按 500ms 之后觸發，觸發了長按事件后進行移動不會觸發屏幕的滾動
binderror            當發生錯誤時觸發 error 事件，detail = {errMsg: 'something wrong'}

 

　　初始化圖形坐標原點

 pos:{
    x:0,
    y:0
  },

 

　　當dom加載完成后執行繪畫動作draw()

  onReady: function (e) {
    this.draw()
  },

 

　　添加draw()繪畫動作

  draw:function(){

    this.pos.x++;
    this.pos.y++;
    // 使用 wx.createContext 獲取繪圖上下文 context
    var context = wx.createCanvasContext('firstCanvas')

   
    //左上角坐標(100，100)，半徑為60，起始角度0°，終止角度2π，順時針繪制
    context.arc(this.pos.x, this.pos.y, 60, 0, 2 * Math.PI, false)

    context.stroke()
    context.draw()
  }

 

　　手指觸摸動作后圖形坐標每隔10ms進行x++,y++方向移動(設置事件間隔對圖形進行重繪制)

  btnclick:function(){
    setInterval(this.draw,10)
  },