画布圆形矩形 - JavaScript

在 JavaScript 中，我们可以使用 HTML5 中的 Canvas 元素来绘制 2D 图形。其中，画布的基本形状可以是矩形和圆形。本篇文章将介绍如何在 Canvas 元素中绘制圆形和矩形，并给出示例代码。

绘制圆形

在 Canvas 中绘制圆形，我们可以使用 arc() 方法。该方法需要传入圆心坐标、半径、起始角度和终止角度四个参数。起始角度和终止角度的单位是弧度，我们可以通过将角度转化为弧度的方式来传入参数。通常情况下，我们可以将起始角度设置为 0，终止角度设置为 2 π，绘制一个完整的圆形。

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

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

上述代码将在 id 为 canvas 的元素中绘制一个圆心坐标为 (100, 100)、半径为 50 的圆形。

绘制矩形

在 Canvas 中绘制矩形，我们可以使用 rect() 方法。该方法需要传入矩形的左上角坐标、宽度和高度四个参数。

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

ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.stroke();

上述代码将在 id 为 canvas 的元素中绘制一个左上角坐标为 (50, 50)、宽度为 100、高度为 100 的矩形。

圆角矩形

如果我们想要绘制圆角矩形，我们可以使用 arcTo() 方法。该方法需要传入四个点的坐标，其中前两个点表示起始点，后两个点表示终止点，我们可以通过在这四个点的拐角处设置圆半径来使矩形具有圆角。

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

ctx.beginPath();
ctx.moveTo(75, 25);
ctx.lineTo(175, 25);
ctx.arcTo(200, 25, 200, 50, 25);
ctx.lineTo(200, 150);
ctx.arcTo(200, 175, 175, 175, 25);
ctx.lineTo(75, 175);
ctx.arcTo(50, 175, 50, 150, 25);
ctx.lineTo(50, 50);
ctx.arcTo(50, 25, 75, 25, 25);
ctx.stroke();

上述代码将在 id 为 canvas 的元素中绘制一个圆角矩形。

总结

JavaScript 中我们可以使用 Canvas 元素来绘制 2D 图形，其中基本形状包括圆形和矩形。我们可以使用 arc() 方法来绘制圆形，使用 rect() 方法来绘制矩形，使用 arcTo() 方法来绘制圆角矩形。