Canvas绘制正三边形、正四边形与正N边形

在前端开发中，HTML5 Canvas API 提供了一种强大且灵活的方式来在网页上绘制图形。通过简单的 JavaScript 函数调用，我们就可以创造出从简单的线条到复杂的动画等一系列视觉效果。本文将详细介绍如何使用 Canvas API 来绘制正三边形（即等边三角形）、正四边形（即正方形）以及更一般的正N边形，并在此过程中探讨一些相关的技巧和最佳实践。

基本概念与作用说明

Canvas API简介

Canvas API 是一种用于在HTML文档中绘制图形的方法。它通过 <canvas> 标签定义一块画布，然后通过JavaScript访问该画布并进行绘图操作。Canvas API 提供了一系列的绘图方法，如 beginPath(), moveTo(), lineTo(), arc(), fill(), 和 stroke() 等。

正多边形的构成

正多边形是由相同长度的边组成的多边形，其中每个内角也都是相等的。为了绘制一个正多边形，我们需要确定每个顶点的位置，并且计算出旋转的角度。对于一个正N边形来说，每个顶点之间的中心角度为 360/N 度。

示例一：创建画布

首先，我们需要在HTML文档中创建一个 <canvas> 元素，并设置其宽高。

<canvas id="myCanvas" width="500" height="500"></canvas>

接下来，在JavaScript中获取这个画布，并准备绘制环境。

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

// 设置画布背景颜色
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

示例二：绘制正三边形

我们将编写一个函数来绘制一个正三边形。

function drawTriangle(ctx, centerX, centerY, sideLength) {
   
    // 保存当前状态
    ctx.save();

    // 移动坐标原点至(centerX, centerY)
    ctx.translate(centerX, centerY);

    // 开始路径
    ctx.beginPath();

    // 第一个顶点位于 (sideLength/2, 0)
    ctx.moveTo(sideLength / 2, 0);

    // 计算第二个顶点位置
    ctx.lineTo(-sideLength / 2, -sideLength * Math.sqrt(3) / 2);

    // 计算第三个顶点位置
    ctx.lineTo(-sideLength / 2,