利用Canvas绘制五角星星空

利用HTML5的Canvas API绘制五角星是一个常见的编程练习。五角星通常通过贝塞尔曲线（Bezier Curves）来实现，可以分为多个步骤：

1. 首先，设置一个五边形的顶点数组。五角星有五个顶点，每个顶点连接两个相邻的线段。

2. 然后，创建一个`moveTo()`函数，用于移动画笔到下一个顶点的位置开始新的线条。

3. 使用`lineTo()`函数绘制从当前位置到下一个顶点的直线，形成五边形的基本轮廓。

4. 接下来，为了得到星形的效果，需要在每条线上插入额外的控制点，并使用三次贝塞尔曲线连接这些点。这可以通过计算中间点的坐标来完成，通常是将当前点、终点和一个等腰三角形的高点作为控制点。

5. 对于每个顶点，你需要计算三次贝塞尔曲线的四个控制点并绘制它们。

6. 最后，关闭路径，即回到起点，通常通过再次调用`moveTo()`并且传入第一个顶点的坐标。

以下是一个简单的JavaScript示例，演示如何在Canvas上绘制五角星：

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

// 定义顶点数组
const vertices = [
  {x: 0, y: -50}, // 第一个顶点
  {x: -37.5, y: -25},
  {x: 0, y: 0},
  {x: 37.5, y: -25},
  {x: 0, y: -50}
];

// 绘制五角星
function drawStar() {
  let currentPointIndex = 0;
  ctx.beginPath();
  ctx.moveTo(vertices[currentPointIndex].x, vertices[currentPointIndex].y);

  for (let i = 1; i < vertices.length; i++) {
    // 计算控制点
    const cp1 = getControlPoint(currentPointIndex, i);
    const cp2 = getControlPoint(i, (i + 1) % vertices.length);

    // 插入控制点并绘制曲线
    ctx.quadraticCurveTo(cp1.x, cp1.y, cp2.x, cp2.y);
    currentPointIndex = (currentPointIndex + 1) % vertices.length;
  }

  // 关闭路径并填充颜色
  ctx.closePath();
  ctx.fillStyle = 'gold';
  ctx.fill();
}

// 获取控制点函数
function getControlPoint(start, end) {
  const distance = Math.sqrt(Math.pow(vertices[end].x - vertices[start].x, 2) + Math.pow(vertices[end].y - vertices[start].y, 2));
  const angle = Math.atan2(vertices[end].y - vertices[start].y, vertices[end].x - vertices[start].x) * 180 / Math.PI;
  const height = distance * 0.7;

  const cpX = vertices[start].x + Math.cos(angle - 36) * height;
  const cpY = vertices[start].y + Math.sin(angle - 36) * height;

  return {x: cpX, y: cpY};
}

drawStar();