本文編輯：  JeremyLu瀏覽 4737 4 版權所有，嚴禁轉載

接口說明:

<canvas />組件只能提供圖像顯示容器，不具備繪制能力，所以還需要使用腳本來完成實際的繪圖任務，交由以下三個canvas API完成。

wx.createContext()創建并返回一個context上下文對象，用于記錄繪制操作，并返回actions數組，交給wx.drawCanvas(OBJECT)綁定<canvas />組件，并將actions繪制在<canvas />組件上；如果想將圖像保存為圖片，調用wx.canvasToTempFilePath(OBJECT)接口。

接口用法：

• wx.drawCanvas繪制接口

wxml

<canvas canvas-id="canvas" ></canvas>

js

var context = wx.createContext()
wx.drawCanvas({
    canvasId: 'canvas',
    actions: context.getActions()
})

• wx.createContext接口返回對象的方法列表：

canvas縮放、旋轉、平移

wxml

<canvas canvas-id="canvas_scale"></canvas>
<canvas canvas-id="canvas_rotate"></canvas>
<canvas canvas-id="canvas_translate"></canvas>

js

onReady:function(){
    var context = wx.createContext()
    context.rect(5, 5, 30, 30)
    context.stroke()
    //縮放
    context.scale(2,2)
    context.stroke()
    context.scale(2,2)
    context.stroke()
    wx.drawCanvas({
      canvasId: 'canvas_scale',
      actions: context.getActions()
    })
    context.clearActions()

    context.rect(30, 30, 100, 100)
    context.stroke()
    //旋轉
    context.rotate(0.15)
    context.stroke()
    wx.drawCanvas({
      canvasId: 'canvas_rotate',
      actions: context.getActions()
    })
    context.clearActions()

    context.rect(30, 30, 100, 100)
    context.stroke()
    //平移
    context.translate(10, 10)
    context.stroke()
     wx.drawCanvas({
      canvasId: 'canvas_translate',
      actions: context.getActions()
    })
  }

wxss

canvas{
    border: 1px solid #E0E0E0;
    margin-top: 10px;
}

canvas繪制

wxml

<canvas canvas-id="canvas1"></canvas>
<canvas canvas-id="canvas2"></canvas>

js

onReady:function(){
    var context = wx.createContext()
    context.rect(15, 15, 100, 100)
    context.fill()
    context.stroke()
    //清除指定范內的像素
    context.clearRect(25, 25, 80, 80)
    //顯示文字
    context.fillText('Text', 40, 40)
    wx.drawCanvas({
        canvasId: 'canvas1',
        actions: context.getActions()
    })
    context.clearActions()
    //顯示圖片
    wx.chooseImage({
      success: function(res) {
        context.drawImage(res.tempFilePaths[0], 0, 0)
        wx.drawCanvas({
          canvasId: 'canvas2',
          actions: context.getActions()
        })
      }
    })
  }

wxss

canvas{
    border: 1px solid lightgray;
    margin-top: 10px;
}

canvas路徑

wxml

<canvas canvas-id="canvas1"></canvas>

js

onReady:function(){
    // 使用 wx.createContext 獲取繪圖上下文 context
    var context = wx.createContext()

    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    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()
    wx.drawCanvas({
      canvasId: 'canvas1',
      actions: context.getActions()
    })
  }

wxss

canvas{
    height: 500px;
}

canvas樣式

wxml

<canvas canvas-id="canvas1"></canvas>
<button type="default" size="default" bindtap="saveas">另存</button>

js

onReady:function(){
    var context = wx.createContext()

    context.setFillStyle("#FF00FF")
    context.setStrokeStyle("#00FFFF")
    context.setGlobalAlpha(1)
    context.setShadow(10,10,10, '#000000')
    context.setFontSize(18)
    context.setLineWidth(3)
    context.setLineCap('round');
    context.setLineJoin('round')
    context.rect(50, 50, 100, 100)
    context.fill()
    context.stroke()
    wx.drawCanvas({
      canvasId: 'canvas1',
      actions: context.getActions()
    })
  },
  //canvas另存為圖片
  saveas: function(e){
    wx.canvasToTempFilePath({
      canvasId: 'canvas1',
      success: function(res){
        console.log(res.tempFilePath)
      }
  }

主要方法

scale：縮放

在調用scale方法后，之后創建的路徑其橫縱坐標會被縮放。多次調用scale，倍數會相乘。

rotate：旋轉

以原點為中心，原點可以用 translate方法修改。順時針旋轉當前坐標軸。多次調用rotate，旋轉的角度會疊加。

translate：平移

對當前坐標系的原點(0, 0)進行變換，默認的坐標系原點為頁面左上角。

clearRect：清除指定區域內容

清除畫布上在該矩形區域內的內容。

drawImage：繪制圖像

繪制圖像，圖像保持原始尺寸。

fillText：填充文本

在畫布上繪制被填充的文本

beginPath

開始創建一個路徑，需要調用fill或者stroke才會使用路徑進行填充或描邊。同一個路徑內的多次setFillStyle、setStrokeStyle、setLineWidth等設置，以最后一次設置為準。

closePage

關閉一個路徑。

moveTo

把路徑移動到畫布中的指定點，不創建線條。

lineTo

在當前位置添加一個新點，然后在畫布中創建從該點到最后指定點的路徑。

rect：添加矩形

添加一個矩形路徑到當前路徑。

arc：畫圓

添加一個弧形路徑到當前路徑，順時針繪制。

quadraticCurveTo：二次貝塞爾曲線

創建二次貝塞爾曲線路徑

bezierCurveTo：三次方貝塞爾曲線

創建三次方貝塞爾曲線路徑

setFillStyle：設置顏色為填充樣式

setStrokeStyle：設置純色描邊

setGlobalAlpha

置全局畫筆透明度。

setShadow：陰影

設置陰影樣式

setFontSize：字號

設置字體的字號。

setLineWidth：線寬

設置線條的寬度

setLineCap

設置線條的結束端點樣式。

setLineJoin

設置兩條線相交時，所創建的拐角類型。

setMiterLimit

設置最大斜接長度，斜接長度指的是在兩條線交匯處內角和外角之間的距離。 當 setLineJoin為 miter 時才有效。超過最大傾斜長度的，連接處將以 lineJoin 為 bevel 來顯示。

• wx.canvasToTempFilePath圖片另存

wxml

<canvas canvas-id="canvas1"></canvas>
<button type="default" size="default" bindtap="saveas">另存</button>

js

saveas: function(e){
    wx.canvasToTempFilePath({
      canvasId: 'canvas1',
      success: function(res){
        console.log(res.tempFilePath)
      }
}

主要方法：