1. 前言在 Web 开发中使用 JavaScript 绘制图形是一项基础且实用的技能。无论是数据可视化、游戏开发还是 UI 设计都离不开图形的绘制。本文将重点介绍如何使用原生 JavaScript 绘制两种常见的不规则图形三角形和五角星。我们将从最基础的 Canvas API 入手逐步构建出完整的图形。2. 准备工作创建画布在开始绘制之前我们需要一个 HTML 画布Canvas元素作为绘图区域。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title绘制不规则图形/title style canvas { border: 1px solid #ccc; display: block; margin: 20px auto; } /style /head body canvas idmyCanvas width400 height300/canvas script srcscript.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); } });6. 总结通过本文我们学习了使用 JavaScript 和 Canvas API 绘制两种不规则图形的方法三角形通过连接三个顶点实现可以轻松绘制任意三角形或等边三角形。五角星通过计算外顶点和内顶点的坐标并按顺序连接而成。核心步骤可以归纳为获取上下文 → 计算路径点 → 开始路径 → 移动/连线 → 闭合路径 → 设置样式 → 填充/描边。掌握这些基础后你可以举一反三绘制出更复杂的多边形和自定义图形。你可以尝试修改代码中的坐标、颜色、大小和旋转角度创造出丰富多彩的图形效果。