如何裁剪图片边角圆角？使用ctx.arc()参数配置困惑求助

核心思路 #

不用先画矩形再处理圆角，直接用Canvas路径绘制出带圆角的裁剪区域，通过clip()方法启用裁剪后，再绘制图片即可实现预期效果。

关键代码实现 #

假设你已经获取到动态计算的圆角半径borderRadius，以及裁剪区域的宽cropWidth、高cropHeight，代码示例如下：

const ctx = canvas.getContext('2d');
const borderRadius = 你的动态半径值;
const cropWidth = 裁剪区域宽度;
const cropHeight = 裁剪区域高度;

// 开始绘制圆角路径
ctx.beginPath();
// 左上角圆角：圆心在(borderRadius, borderRadius)，从180°到270°
ctx.arc(borderRadius, borderRadius, borderRadius, Math.PI, Math.PI * 1.5);
// 顶部直线：连接左上角圆角终点到右上角圆角起点
ctx.lineTo(cropWidth - borderRadius, borderRadius);
// 右上角圆角：圆心在(cropWidth-borderRadius, borderRadius)，从270°到0°
ctx.arc(cropWidth - borderRadius, borderRadius, borderRadius, Math.PI * 1.5, Math.PI * 2);
// 右侧直线：连接右上角圆角终点到右下角圆角起点
ctx.lineTo(cropWidth, cropHeight - borderRadius);
// 右下角圆角：圆心在(cropWidth-borderRadius, cropHeight-borderRadius)，从0°到90°
ctx.arc(cropWidth - borderRadius, cropHeight - borderRadius, borderRadius, 0, Math.PI * 0.5);
// 底部直线：连接右下角圆角终点到左下角圆角起点
ctx.lineTo(borderRadius, cropHeight);
// 左下角圆角：圆心在(borderRadius, cropHeight-borderRadius)，从90°到180°
ctx.arc(borderRadius, cropHeight - borderRadius, borderRadius, Math.PI * 0.5, Math.PI);
// 闭合路径
ctx.closePath();

// 启用裁剪
ctx.clip();

// 绘制图片（img为原始图片对象，0,0为裁剪区域的起始坐标）
ctx.drawImage(img, 0, 0, cropWidth, cropHeight);

ctx.arc参数拆解 #

• x/y：圆角的圆心坐标，比如左上角圆角的圆心是矩形左上角顶点往内偏移半径的位置，即(borderRadius, borderRadius)，以此类推其他三个角
• radius：直接使用你获取到的动态borderRadius值
• 起始/结束角度（弧度）：对应四个圆角的绘制方向：
  • 左上角：从左水平方向（180°，Math.PI）转到上垂直方向（270°，Math.PI*1.5）
  • 右上角：从上垂直方向（270°）转到右水平方向（0°）
  • 右下角：从右水平方向（0°）转到下垂直方向（90°，Math.PI*0.5）
  • 左下角：从下垂直方向（90°）转到左水平方向（180°）

注意事项 #

• 如果裁剪区域不是从Canvas原点开始，需要给所有路径坐标加上对应的偏移量
• 绘制图片时，可通过drawImage的参数调整图片的显示范围，确保和裁剪区域匹配

内容的提问来源于stack exchange，提问作者lcsxx