绘制完美圆角矩形的秘密武器：Canvas arcTo() 方法

前端

2023-11-30 21:52:37

导言

在 Canvas 绘图领域，圆角矩形是一种常见的图形元素。然而，绘制它们并不总是一件容易的事。传统的 Canvas 方法只能创建具有固定曲率的圆角，而这可能会限制设计选择。但是，有了强大的 arcTo() 方法，这一切都将改变。

深入了解 arcTo()

arcTo() 方法通过提供对圆角大小的精确控制，使绘制圆角矩形变得轻而易举。它接受六个参数：

x1、y1：圆弧起点坐标
x2、y2：圆弧终点坐标
radius：圆弧半径

通过控制 radius 参数，您可以创建具有不同曲率的各种圆角。

使用 arcTo() 绘制圆角矩形

绘制圆角矩形的基本步骤如下：

移动到起点： 使用 moveTo() 方法移动到矩形的左上角。
绘制顶部边： 使用 lineTo() 方法绘制矩形的顶部边。
绘制右上角圆弧： 使用 arcTo() 方法绘制右上角圆弧。
绘制右下角边： 使用 lineTo() 方法绘制矩形的右下角边。
绘制左下角圆弧： 使用 arcTo() 方法绘制左下角圆弧。
绘制底部边： 使用 lineTo() 方法绘制矩形的底部边。
绘制左上角圆弧： 使用 arcTo() 方法绘制左上角圆弧。
闭合路径： 使用 closePath() 方法闭合路径，完成矩形。

示例代码

以下示例代码演示如何使用 arcTo() 方法绘制圆角矩形：

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

// 设置圆角半径
const radius = 10;

// 绘制矩形
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.arcTo(200, 10, 200, 20, radius);
ctx.lineTo(200, 200);
ctx.arcTo(200, 200, 190, 200, radius);
ctx.lineTo(10, 200);
ctx.arcTo(10, 200, 10, 190, radius);
ctx.lineTo(10, 10);
ctx.arcTo(10, 10, 20, 10, radius);
ctx.closePath();

// 填充矩形
ctx.fillStyle = "lightblue";
ctx.fill();