极客笔记TypeScript 如何绘制正多边形
正多边形，例如正方形、三角形和六边形，是在各种应用程序和图形中使用的基本形状。通过编程绘制正多边形在TypeScript中非常有用，可以动态创建几何形状。在本教程中，我们将探讨如何利用基本数学原理和HTML5画布元素在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画布元素并获取其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; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
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; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
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; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
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; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
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; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 8, 100, 100, 80);
输出
结论
在TypeScript中以编程方式绘制规则多边形可以通过计算它们顶点的坐标并使用线条或路径将它们连接起来来实现。在本教程中，我们介绍了绘制规则多边形的基本概念，并使用TypeScript提供了清晰的示例。您现在可以应用这些知识来创建具有不同边数和尺寸的各种规则多边形。