在线DEMO预览

圆形头像

1. 使用context.arc(x,y,r,sAngle,eAngle,counterclockwise)绘制圆形路径，圆心定位到图片中间。
2. 使用clip()对canvas画布进行裁减
3. 绘制图片，超过裁减区域的将会被隐藏。

function drawCircle() {
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, 400, 200)
    ctx.save()
    ctx.beginPath();
    ctx.arc(100, 100, 100, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.clip()
    let img = new Image()
    img.onload = () => {
      ctx.drawImage(img, 0, 0, 200, 200)
      ctx.restore()
    }
    img.src = "1.jpeg"
}

圆角效果

1. 使用context.arcTo(x1,y1,x2,y2,r)分别绘制各个圆角。（arcTo使用详解）
2. 使用clip()对画布进行裁减。
3. 绘制图片，超过裁减区域的将会被隐藏。

let r = 20 //圆角大小
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, 400, 200)
ctx.save()
let x = 0,y = 0,w = 200,h = 200;
//圆角半径不能超过宽高的一半
if (w < 2 * r) { r = w / 2 } 
if (h < 2 * r) { r = h / 2 }
ctx.beginPath();
ctx.moveTo(x, y)
//ctx.lineTo(x + w - r,y)
ctx.arcTo(x + w, y, x + w, y + r, r);
// ctx.lineTo(x + w, y + h - r)
ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
// ctx.lineTo(x + r,y + h)
ctx.arcTo(x, y + h, x, y + h - r, r)
// ctx.lineTo(x,y + r)
ctx.arcTo(x, y, x + r, y, r)
ctx.closePath();
ctx.clip()
let img = new Image()
img.onload = () => {
  ctx.drawImage(img, x, y, w, h)
  ctx.restore()
}
img.src = "1.jpeg"

五角星效果

1. 绘制五角星路径。
2. 使用clip()对canvas画布进行裁减
3. 绘制图片，超过裁减区域的将会被隐藏。

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, 400, 200)
ctx.save()
ctx.beginPath();
let R = 100, r = 50, x = 100, y = 100;
for (var i = 0; i < 5; i++) {
  var x1 = Math.cos((18 + 72 * i) / 180 * Math.PI) * R,
    y1 = -Math.sin((18 + 72 * i) / 180 * Math.PI) * R,
    x2 = Math.cos((54 + 72 * i) / 180 * Math.PI) * r,
    y2 = -Math.sin((54 + 72 * i) / 180 * Math.PI) * r;
  ctx.lineTo(x1 + x, y1 + y);
  ctx.lineTo(x2 + x, y2 + y);
}
ctx.closePath();
ctx.clip()
let img = new Image()
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 200)
  ctx.restore()
}
img.src = "1.jpeg"