如何在 TypeScript 中绘制正多边形?
typescriptweb developmentfront end technology
正多边形，例如正方形、三角形和六边形，是各种应用程序和图形中使用的基本形状。在 TypeScript 中，以编程方式绘制正多边形非常有用，它允许您动态创建几何形状。在本教程中，我们将探索如何利用基本的数学原理和 HTML5 Canvas 元素在 TypeScript 中绘制正多边形。
语法
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n;
ctx.beginPath();
ctx.moveTo(x + r, y);
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle);
const vertexY = y + r * Math.sin(i * angle);
ctx.lineTo(vertexX, vertexY);
}
ctx.closePath();
ctx.stroke();
}
我们定义了 drawRegularPolygon 函数，该函数接受一个 CanvasRenderingContext2D 对象 (ctx)、边数 (n)、圆心 (x, y) 和半径 (r)。我们通过将整个圆(2π 弧度)除以边数来计算每个顶点之间的角度。从第一个顶点开始，我们遍历剩余的顶点，使用三角函数(Math.cos 和 Math.sin)计算它们的坐标。最后，我们使用 lineTo 方法连接顶点，使用 closePath 关闭路径，并使用 stroke 描边多边形的轮廓。
示例 1:绘制正方形
在第一个示例中，我们创建一个 HTML canvas 元素并获取其 2D 渲染上下文 (ctx)。然后，我们调用 drawRegularPolygon 函数，传入渲染上下文、边数(正方形为 4)、中心点 (150, 150) 和半径 (100)。drawRegularPolygon 函数计算每个顶点的坐标，并用线段连接它们，最终在画布上绘制一个正方形。
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // 计算每个顶点之间的角度
ctx.beginPath();
ctx.moveTo(x + r, y); // 将起点移动到第一个顶点
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // 计算当前顶点的 x 坐标
const vertexY = y + r * Math.sin(i * angle); // 计算当前顶点的 y 坐标
ctx.lineTo(vertexX, vertexY); // 将当前顶点连接到上一个顶点
}
ctx.closePath();
ctx.stroke(); // 绘制多边形轮廓
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 4, 150, 150, 100);
输出
示例 2:绘制六边形
在第二个示例中，我们使用相同的画布和渲染上下文。这次，我们调用 drawRegularPolygon 函数，并将六边形的边数设置为 6，中心点位于 (200, 200)，半径为 80 像素。
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // 计算每个顶点之间的角度
ctx.beginPath();
ctx.moveTo(x + r, y); // 将起点移动到第一个顶点
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // 计算当前顶点的 x 坐标
const vertexY = y + r * Math.sin(i * angle); // 计算当前顶点的 y 坐标
ctx.lineTo(vertexX, vertexY); // 将当前顶点连接到上一个顶点
}
ctx.closePath();
ctx.stroke(); // 绘制多边形轮廓
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 6, 100, 100, 80);
输出
示例 3:绘制等边三角形
在本例中，我们指定边数为 3，创建一个等边三角形。中心点设置为 (250, 250)，半径设置为 120 像素。drawRegularPolygon 函数计算每个顶点的坐标并连接它们，最终在画布上绘制一个三角形。
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // 计算每个顶点之间的角度
ctx.beginPath();
ctx.moveTo(x + r, y); // 将起点移动到第一个顶点
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // 计算当前顶点的 x 坐标
const vertexY = y + r * Math.sin(i * angle); // 计算当前顶点的 y 坐标
ctx.lineTo(vertexX, vertexY); // 将当前顶点连接到上一个顶点
}
ctx.closePath();
ctx.stroke(); // 绘制多边形轮廓
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 3, 200, 120, 120);
输出
示例 4:绘制五边形
在本例中，我们指定边数为 5，创建一个正五边形。中心点设置为 (300, 300)，半径设置为 100 像素。
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // 计算每个顶点之间的角度
ctx.beginPath();
ctx.moveTo(x + r, y); // 将起点移动到第一个顶点
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // 计算当前顶点的 x 坐标
const vertexY = y + r * Math.sin(i * angle); // 计算当前顶点的 y 坐标
ctx.lineTo(vertexX, vertexY); // 将当前顶点连接到上一个顶点
}
ctx.closePath();
ctx.stroke(); // 绘制多边形轮廓
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 5, 150, 150, 100);
输出
示例 5:绘制八边形
在本例中，我们指定边数为 8 来创建一个八边形。中心点设置为 (400, 400)，半径设置为 80 像素。drawRegularPolygon 函数计算每个顶点的坐标并将它们连接起来，最终在画布上绘制一个八边形。
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // 计算每个顶点之间的角度
ctx.beginPath();
ctx.moveTo(x + r, y); // 将起点移动到第一个顶点
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // 计算当前顶点的 x 坐标
const vertexY = y + r * Math.sin(i * angle); // 计算当前顶点的 y 坐标
ctx.lineTo(vertexX, vertexY); // 将当前顶点连接到上一个顶点
}
ctx.closePath();
ctx.stroke(); // 绘制多边形轮廓
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 8, 100, 100, 80);
输出
结论
在 TypeScript 中，可以通过计算顶点坐标并使用线条或路径连接顶点来实现以编程方式绘制正多边形。在本教程中，我们介绍了绘制正多边形的基本概念，并提供了清晰的 TypeScript 示例。现在，您可以运用这些知识来创建具有不同边数和维度的各种正多边形。
