微信小程序使用canvas畫不規則圖形

 一、根據UI在海報中畫不同的圖片形狀的路徑，這中用css很簡單，用canvas畫的話就要了解canvas中的幾個方法，

效果圖：

代碼如下：

Page({
  canvasIdErrorCallback(e) {
    console.error(e.detail.errMsg)
  },
  onReady(e) {
    // 使用 wx.createContext 獲取繪圖上下文 context
    const context = wx.createCanvasContext('firstCanvas')
    context.save();
    //開始一個新的繪製路徑
    context.beginPath();
    //設置路徑起點座標
    context.moveTo(50, 50);
    context.arc(50, 50, 50, 0, Math.PI, true); //畫圓
    context.moveTo(0, 50);
    context.lineTo(0, 100);  //控制繪製圖片路徑的高度
    context.lineTo(100, 100); //控制繪製圖片路徑的高度
    context.lineTo(100, 50);
    //先關閉繪製路徑。注意，此時將會使用直線連接當前端點和起始端點。
    context.closePath();
    context.clip();
    context.stroke(); //畫線輪廓
    context.drawImage('../../images/1.png', 0, 0, 256, 191);
    context.restore();
    context.draw();
  }
})

這個繪製圖片路徑相對簡單，只要瞭解canvas基本方法，再調試就能實現