canvas实现矩形圆角、圆形头像图片

前言

1、实现矩形圆角、圆形图片
2、图片上方两角为圆角，下方两角不为圆角的设置过程

绘制矩形头像,画头像,这里画矩形图

  

var ctx = wx.createCanvasContext('myCanvas');
var that = this;
wx.getImageInfo({
//网图地址
  src: imgurl,
  success(res){
      var r = 10*rpx
      var x = 45*rpx
      var y = 780*rpx
      var w = 50*rpx
      var h = 50*rpx
      that.drawRoundRect(ctx,r,x,y,w,h,res.path)
  }
})

头像矩形方法

drawRoundRect (ctx,r,x,y,w,h,img) {
  ctx.save()
  if (w < 2 * r) r = w / 2
  if (h < 2 * r) r = h / 2
  ctx.beginPath()
  ctx.moveTo(x+r, y)
  ctx.arcTo(x+w, y, x+w, y+h, r)//右上角，设置r为0则变为直角
  ctx.arcTo(x+w, y+h, x, y+h, r)//右下角
  ctx.arcTo(x, y+h, x, y, r)//左下角
  ctx.arcTo(x, y, x+w, y, r)//左上角
  ctx.closePath();
  ctx.clip()
  ctx.drawImage(img, x, y, w, h)
  ctx.restore() // 返回上一状态
},

图片上方两角为圆角，下方两角不为圆角的设置过程

可对比和上一个方法的区别
把右下角、左下角的r设置为0

drawRoundRect (ctx,r,x,y,w,h,img) {
  ctx.save()
  if (w < 2 * r) r = w / 2
  if (h < 2 * r) r = h / 2
  ctx.beginPath()
  ctx.moveTo(x+r, y)
  ctx.arcTo(x+w, y, x+w, y+h, r)//右上角，设置r为0则变为直角
  ctx.arcTo(x+w, y+h, x, y+h, 0)//右下角
  ctx.arcTo(x, y+h, x, y, 0)//左下角
  ctx.arcTo(x, y, x+w, y, r)//左上角
  ctx.closePath();
  ctx.clip()
  ctx.drawImage(img, x, y, w, h)
  ctx.restore() // 返回上一状态
},

画圆形头像方法

function drawRound (ctx,r,x,y,img) {
    ctx.save() // 保存之前的
    var r = r // 半径*屏幕分辨率比例
    var d = 2*r // 直径
    var cx = x + r // 圆弧坐标x
    var cy = y + r // 圆弧坐标 y
    ctx.arc(cx, cy, r ,0, 2*Math.PI)
    ctx.clip() // 裁剪
    ctx.drawImage(img, x, y, d, d) // 画头像
    ctx.restore() // 返回上一状态
}

绘制好的图片

image.png

学习过程中参考文章，感谢分享！
canvas 画圆角矩形头像合成图片