微信小程序使用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基本方法，再调试就能实现