手把手教你用Canvas绘制六边形能力图

"这篇文章主要介绍了如何使用HTML5的Canvas API手绘一个六边形能力图。作者通过解析绘制过程中的关键点，详细讲解了如何计算和确定六边形的顶点坐标，以及如何在Canvas画布上进行绘制。" 在Web开发中，Canvas是一个非常重要的元素，它允许开发者通过JavaScript来绘制图形。在这个案例中，我们专注于利用Canvas来构建一个六边形能力图，这种图表常用于表示个人或团队在不同领域的能力分布。首先，我们需要理解Canvas的基本概念和API，如创建画布、获取2D渲染上下文以及绘制线条和形状的方法。 Canvas的大小可以通过设置`width`和`height`属性来调整，而中心点(centerX, centerY)通常位于`(width/2, height/2)`。为了绘制六边形，我们首先要计算出它的各个顶点坐标。六边形的每个顶点都相对于中心点对称分布，所以只需要计算出一组相邻两个顶点的坐标，其他的可以通过对称关系得出。 关键步骤如下： 1. 确定六边形的边长（edge），然后计算出x坐标（x）：`x = edge * Math.sqrt(3) / 2`。这个值是根据六边形的几何特性得出的，确保每个内角都是120度。 2. 计算出左上角坐标（left, top）。`left = centerX - x`，`top`的计算则涉及到六边形的高度，需要进一步的计算。 3. 通过对称性确定其余顶点坐标。例如，x1, x2, x3, x4, x5, x6分别对应于左上、右上、右下、左下以及两个中心点对称的顶点。y1, y2, y3, y4, y5, y6也类似。 4. 使用这些坐标来创建一个点数组，然后使用Canvas的`context.beginPath()`开始路径，`context.moveTo()`移动到第一个点，接着使用`context.lineTo()`连接各点，最后用`context.closePath()`闭合路径，并可通过`context.stroke()`或`context.fill()`填充颜色。 示例代码如下： ```javascript function computeHexagonPoints(width, height, edge) { let centerX = width / 2; let centerY = height / 2; let x = edge * Math.sqrt(3) / 2; let left = centerX - x; // 计算顶点坐标 // ... (略) let points = new Array(); points[0] = [x1, y1]; points[1] = [x2, y2]; points[2] = [x3, y3]; points[3] = [x4, y4]; points[4] = [x5, y5]; points[5] = [x6, y6]; return points; } // 获取Canvas 2D渲染上下文 let ctx = canvas.getContext('2d'); // 绘制六边形 let edge = 50; // 边长 let points = computeHexagonPoints(canvas.width, canvas.height, edge); ctx.beginPath(); ctx.moveTo(points[0][0], points[0][1]); for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i][0], points[i][1]); } ctx.closePath(); ctx.stroke(); // 绘制轮廓 ``` 通过调整`edge`的值，我们可以改变六边形的大小，进而构建不同层次的能力图。在实际应用中，可以结合CSS和JavaScript动态改变这些值，或者根据用户输入自适应地调整图形。 此外，虽然这里使用了纯Canvas绘制，但也可以选择像ECharts.js这样的可视化库，它们提供了更丰富的交互性和更简单的API，能够快速实现类似的图形，适合于复杂的可视化需求。然而，手绘六边形的能力图有助于深入理解图形绘制的原理，对于提升前端开发技能非常有帮助。