微信小程序Canvas绘制圆形图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39872588/article/details/80665003

<canvas canvas-id="myCanvas"/>

//获取设备的信息
let mobile = wx.getSystemInfoSync();
//获取设计图纸换算比例（用于自适应所有屏幕）
let ratio = mobile.windowWidth / 375;（375px为iphone6屏幕宽度）
const ctx = wx.createCanvasContext('myCanvas')
//图片宽度、高度
var arcWidth = 26 * ratio;
//x-轴坐标
var xCoor = 21 * ratio;
//y-轴坐标
var yCoor = 32 * ratio;
//需要将网络图片url 转为本地临时路径（res.tempFilePath为图片临时路径）
//微信定义：clip() 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
wx.downloadFile({
  url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
  success: function(res) {
      ctx.save()
      ctx.beginPath()
      ctx.arc(xCoor+arcWidth/2, yCoor+arcWidth/2, arcWidth/2, 0, Math.PI * 2, false);
      ctx.clip()
      ctx.drawImage(res.tempFilePath,xCoor, yCoor,arcWidth,arcWidth);
      ctx.restore()
      ctx.draw()
  }
})

如需转载请联系博...