画布圆角 - Javascript

在使用 canvas 绘图时，我们可能会需要给画布或绘制的图形添加圆角。在这篇文章中，您将了解如何使用 Javascript 给画布添加圆角及如何绘制带有圆角的图形。

给画布添加圆角

首先，让我们来看看如何给画布添加圆角。我们可以使用 canvas 元素的 getContext() 方法和 arcTo() 方法来实现。

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

const radius = 10; // 圆角半径

ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(canvas.width - radius, 0);
ctx.arcTo(canvas.width, 0, canvas.width, radius, radius);
ctx.lineTo(canvas.width, canvas.height - radius);
ctx.arcTo(canvas.width, canvas.height, canvas.width - radius, canvas.height, radius);
ctx.lineTo(radius, canvas.height);
ctx.arcTo(0, canvas.height, 0, canvas.height - radius, radius);
ctx.lineTo(0, radius);
ctx.arcTo(0, 0, radius, 0, radius);
ctx.closePath();
ctx.fillStyle = 'lightgray';
ctx.fill();

在上面的代码中，我们首先获取了 canvas 元素和它的 2D 上下文对象 ctx。然后，我们定义了圆角的半径，并利用 ctx.beginPath() 开始绘制路径。接下来，我们使用 moveTo() 方法设置路径的起点，并使用 lineTo() 方法绘制了路径的第一条线段。

接着，我们使用 arcTo() 方法绘制了 4 个圆角。该方法需要 5 个参数，前两个参数表示路径的初始控制点，后两个参数表示路径的终点控制点，第五个参数表示圆角半径。

最后，我们使用 closePath() 方法关闭路径，并设置颜色并填充路径。

如果您需要给某一个具体的图形添加圆角，可以先绘制该图形的路径，然后再使用 arcTo() 方法给该路径的四个角添加圆角。

绘制带有圆角的图形

除了给画布添加圆角外，我们还可以给绘制的图形添加圆角。以下是一个示例，演示如何使用 rect() 方法和 arc() 方法绘制一个带有圆角的矩形。

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

const x = 50; // 矩形左上角的 x 坐标
const y = 50; // 矩形左上角的 y 坐标
const width = 200; // 矩形的宽度
const height = 100; // 矩形的高度
const radius = 20; // 圆角半径

ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arcTo(x + width, y, x + width, y + radius, radius);
ctx.lineTo(x + width, y + height - radius);
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
ctx.lineTo(x + radius, y + height);
ctx.arcTo(x, y + height, x, y + height - radius, radius);
ctx.lineTo(x, y + radius);
ctx.arcTo(x, y, x + radius, y, radius);
ctx.closePath();
ctx.fillStyle = 'lightgray';
ctx.fill();

在上面的代码中，我们先定义了矩形的左上角坐标、宽度和高度，并定义了圆角的半径。然后，我们使用 ctx.beginPath() 开始绘制路径，并使用 moveTo() 方法设置路径的起点。接着，我们使用 lineTo() 和 arcTo() 方法绘制了 4 个圆角。

最后，我们使用 closePath() 方法关闭路径，并设置颜色并填充路径。

结语

在这篇文章中，您了解了如何使用 Javascript 给画布添加圆角及如何绘制带有圆角的图形。希望这篇文章对您有所帮助！