canvas处理图片圆形

将图片绘制在一个圆形的路径上，然后裁剪出圆形区域即可。

以下是一个示例代码：

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.src = 'path/to/image.jpg';
image.onload = function() {
  // 绘制圆形路径
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
  ctx.closePath();
  // 裁剪出圆形区域
  ctx.clip();
  // 绘制图片
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}

首先，创建一个 `<canvas>` 元素和一个 `CanvasRenderingContext2D` 对象。然后，创建一个 `Image` 对象并加载图片。在图片加载完成后，绘制一个圆形路径，并使用 `ctx.clip()` 方法将路径设置为裁剪区域。最后，使用 `ctx.drawImage()` 方法将图片绘制到画布上。

注意，以上代码只是一个示例，实际应用中可能需要根据图片大小和画布大小做出调整。