JavaScript 绘制简单不规则图形：三角形与五角星实战教程-平芜编程栈

1. 前言

在 Web 开发中，使用 JavaScript 绘制图形是一项基础且实用的技能。无论是数据可视化、游戏开发还是 UI 设计，都离不开图形的绘制。本文将重点介绍如何使用原生 JavaScript 绘制两种常见的不规则图形：三角形和五角星。我们将从最基础的 Canvas API 入手，逐步构建出完整的图形。

2. 准备工作：创建画布

在开始绘制之前，我们需要一个 HTML 画布（Canvas）元素作为绘图区域。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>绘制不规则图形</title> <style> canvas { border: 1px solid #ccc; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="myCanvas" width="400" height="300"></canvas> <script src="script.js"></script> </body> </html>

同时，创建一个script.js文件，并获取 Canvas 的 2D 绘图上下文。

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

3. 绘制三角形

三角形是最简单的多边形。在 Canvas 中，我们通过定义三个顶点并连接它们来绘制。

3.1 基本三角形绘制

使用beginPath()、moveTo()、lineTo()和closePath()方法。

function drawTriangle(x1, y1, x2, y2, x3, y3, fillColor = '#3498db') { ctx.beginPath(); ctx.moveTo(x1, y1); // 起点 ctx.lineTo(x2, y2); // 第二个点 ctx.lineTo(x3, y3); // 第三个点 ctx.closePath(); // 自动连接回起点 ctx.fillStyle = fillColor; ctx.fill(); // 填充三角形 // 可选：绘制边框 ctx.strokeStyle = '#2c3e50'; ctx.lineWidth = 2; ctx.stroke(); } // 绘制一个三角形 drawTriangle(100, 50, 50, 150, 150, 150);

这段代码会在画布上绘制一个蓝色的填充三角形。

3.2 绘制等边三角形

等边三角形的三个顶点坐标可以通过数学公式计算得出。

function drawEquilateralTriangle(centerX, centerY, sideLength, fillColor = '#e74c3c') { const height = sideLength * Math.sqrt(3) / 2; // 等边三角形的高 const x1 = centerX; const y1 = centerY - height / 2; // 顶点 const x2 = centerX - sideLength / 2; const y2 = centerY + height / 2; // 左下角点 const x3 = centerX + sideLength / 2; const y3 = centerY + height / 2; // 右下角点 drawTriangle(x1, y1, x2, y2, x3, y3, fillColor); } // 在画布中心绘制一个边长为100的等边三角形 drawEquilateralTriangle(200, 150, 100);

4. 绘制五角星

五角星的绘制比三角形复杂，需要计算十个顶点（五个外顶点和五个内顶点）。

4.1 计算五角星顶点

五角星的顶点坐标可以通过圆上的角度和半径来计算。

function drawStar(centerX, centerY, outerRadius, innerRadius, fillColor = '#f1c40f') { ctx.beginPath(); for (let i = 0; i < 10; i++) { const radius = i % 2 === 0 ? outerRadius : innerRadius; // 交替使用外半径和内半径 const angle = Math.PI / 2 + i * Math.PI / 5; // 每个顶点间隔36度（π/5弧度） const x = centerX + radius * Math.cos(angle); const y = centerY - radius * Math.sin(angle); // Canvas Y轴向下为正，故用减号 if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.closePath(); ctx.fillStyle = fillColor; ctx.fill(); ctx.strokeStyle = '#d35400'; ctx.lineWidth = 2; ctx.stroke(); } // 在画布中心绘制一个五角星 drawStar(200, 150, 80, 40);

outerRadius是外顶点到中心的距离，innerRadius是内顶点到中心的距离。调整这两个值可以改变五角星的“胖瘦”。

4.2 绘制多个不同样式的星星

我们可以封装一个更通用的函数，并绘制多个星星。

function drawStyledStar(centerX, centerY, outerRadius, innerRadius, fillColor, rotation = 0) { ctx.save(); // 保存当前绘图状态 ctx.translate(centerX, centerY); // 将原点移动到星星中心 ctx.rotate(rotation * Math.PI / 180); // 旋转（角度转弧度） ctx.beginPath(); for (let i = 0; i < 10; i++) { const radius = i % 2 === 0 ? outerRadius : innerRadius; const angle = Math.PI / 2 + i * Math.PI / 5; const x = radius * Math.cos(angle); const y = -radius * Math.sin(angle); // 注意Y轴方向 if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.closePath(); ctx.fillStyle = fillColor; ctx.fill(); ctx.strokeStyle = '#2c3e50'; ctx.lineWidth = 1; ctx.stroke(); ctx.restore(); // 恢复绘图状态 } // 绘制多个星星 drawStyledStar(100, 80, 30, 12, '#9b59b6', 0); drawStyledStar(300, 80, 40, 18, '#1abc9c', 15); drawStyledStar(100, 220, 35, 14, '#e67e22', -10); drawStyledStar(300, 220, 25, 10, '#e74c3c', 30);

5. 完整示例与交互

将以上代码整合，并添加简单的交互（例如点击画布随机绘制三角形或星星）。

// 整合后的 script.js 文件 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // ... 此处插入前面定义的 drawTriangle, drawEquilateralTriangle, drawStar, drawStyledStar 函数 ... // 初始绘制 drawEquilateralTriangle(200, 150, 100, '#3498db'); drawStar(200, 150, 80, 40, '#f1c40f'); // 点击交互：随机绘制图形 canvas.addEventListener('click', function(event) { const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 // 随机选择绘制三角形或星星 if (Math.random() > 0.5) { const size = 20 + Math.random() * 50; drawEquilateralTriangle(x, y, size, `hsl(${Math.random() * 360}, 70%, 60%)`); } else { const outerR = 15 + Math.random() * 40; const innerR = outerR * 0.5; drawStyledStar(x, y, outerR, innerR, `hsl(${Math.random() * 360}, 70%, 60%)`, Math.random() * 360); } });