JSFiddle - React, Tailwind, and code Playground

by G Issac

HTML

<h4>裁剪：</h4>
<canvas id="canvas" style="border: 1px solid;"></canvas>

<canvas id="canvas1" style="border: 1px solid;"></canvas>

JavaScript

var canvas = document.querySelector("#canvas");
  var context = canvas.getContext("2d");
  var img = new Image();
  img.src = 'https://pbs.twimg.com/profile_images/588883654157291520/4DBMn6_A.jpg';
  // 首先是先画一个圆形，因为现在我们不是画圆角矩形，所以就不用“张鑫旭”画圆
  // 的做法，我们直接使用 `arc` 接口
  context.save();
  context.arc(100, 100, 50, 0, 2 * Math.PI);
  // 从画布上裁剪出这个圆形
  context.clip();
  context.drawImage(img, 50, 50, 100, 100);

// 封装了一个简单的方法
function circleImg(ctx, img, x, y, r) {
  ctx.save();
  var d =2 * r;
  var cx = x + r;
  var cy = y + r;
  ctx.arc(cx, cy, r, 0, 2 * Math.PI);
  ctx.clip();
  ctx.drawImage(img, x, y, d, d);
  ctx.restore();
}
var canvas1 = document.querySelector("#canvas1");
var context1 = canvas1.getContext("2d");
context.clip();
circleImg(context1, img, 100, 20, 50);