js+canvas绘制五角星的方法

这里是“js+canvas绘制五角星的方法”的完整攻略。

1. 准备工作

在开始绘制五角星之前，需要准备好以下工作：

1. 在HTML文件中添加一个Canvas标签用于绘图；
2. 在Javascript中获取Canvas元素，并获取它的2D上下文，以便可以在Canvas上绘制图形；
3. 定义绘制五角星的函数，该函数应该接收五角星的中心点坐标、半径、线宽和填充颜色等参数。

2. 绘制五角星

绘制五角星的流程如下：

1. 计算五角星的五个顶点的位置，分别为A、B、C、D、E；
2. 在Canvas上以A点为起始点，依次连接各个点，形成五角星的轮廓；
3. 给五角星填充颜色。

2.1 步骤1：计算五角星的顶点坐标

五角星有五个顶点，分别为A、B、C、D、E。为了计算它们的坐标，我们可以假设五角星内部有一个圆，以此为基础来计算各个顶点的坐标。

假设圆的半径为R，五角星的中心点坐标为(x,y)，则五角星的顶点坐标可以通过以下公式计算得出：

// 计算五角星A点坐标
const pointA = {
  x: x,
  y: y - R
};
// 计算五角星B点坐标
const pointB = {
  x: x + R * Math.sin(Math.PI / 10),
  y: y - R * Math.cos(Math.PI / 10)
};
// 计算五角星C点坐标
const pointC = {
  x: x + R * Math.sin((Math.PI / 10) * 3),
  y: y - R * Math.cos((Math.PI / 10) * 3)
};
// 计算五角星D点坐标
const pointD = {
  x: x + R * Math.sin((Math.PI / 10) * 7),
  y: y - R * Math.cos((Math.PI / 10) * 7)
};
// 计算五角星E点坐标
const pointE = {
  x: x + R * Math.sin((Math.PI / 10) * 9),
  y: y - R * Math.cos((Math.PI / 10) * 9)
};

2.2 步骤2：绘制五角星轮廓

绘制五角星轮廓可以通过Canvas的lineTo方法实现。绘制的过程可以简单的描述为：从A点开始，依次连接A、B、C、D、E、A六个点。

具体代码实现如下：

function drawStar(ctx, x, y, R, lineWidth, fillColor) {
  // 计算五角星的各个顶点坐标
  const pointA = {
    x: x,
    y: y - R
  };
  const pointB = {
    x: x + R * Math.sin(Math.PI / 10),
    y: y - R * Math.cos(Math.PI / 10)
  };
  const pointC = {
    x: x + R * Math.sin((Math.PI / 10) * 3),
    y: y - R * Math.cos((Math.PI / 10) * 3)
  };
  const pointD = {
    x: x + R * Math.sin((Math.PI / 10) * 7),
    y: y - R * Math.cos((Math.PI / 10) * 7)
  };
  const pointE = {
    x: x + R * Math.sin((Math.PI / 10) * 9),
    y: y - R * Math.cos((Math.PI / 10) * 9)
  };

  // 开始绘制五角星
  ctx.beginPath();
  ctx.moveTo(pointA.x, pointA.y);
  ctx.lineTo(pointC.x, pointC.y);
  ctx.lineTo(pointE.x, pointE.y);
  ctx.lineTo(pointB.x, pointB.y);
  ctx.lineTo(pointD.x, pointD.y);
  ctx.lineTo(pointA.x, pointA.y);
  ctx.fillStyle = fillColor;
  ctx.lineWidth = lineWidth;
  ctx.fill();
  ctx.stroke();
}

2.3 步骤3：给五角星填充颜色

绘制五角星的最后一步是给它填充颜色。可以通过Canvas的fill方法来实现，具体代码如下：

function drawStar(ctx, x, y, R, lineWidth, fillColor) {
  // 计算五角星的各个顶点坐标
  const pointA = {
    x: x,
    y: y - R
  };
  const pointB = {
    x: x + R * Math.sin(Math.PI / 10),
    y: y - R * Math.cos(Math.PI / 10)
  };
  const pointC = {
    x: x + R * Math.sin((Math.PI / 10) * 3),
    y: y - R * Math.cos((Math.PI / 10) * 3)
  };
  const pointD = {
    x: x + R * Math.sin((Math.PI / 10) * 7),
    y: y - R * Math.cos((Math.PI / 10) * 7)
  };
  const pointE = {
    x: x + R * Math.sin((Math.PI / 10) * 9),
    y: y - R * Math.cos((Math.PI / 10) * 9)
  };

  // 开始绘制五角星
  ctx.beginPath();
  ctx.moveTo(pointA.x, pointA.y);
  ctx.lineTo(pointC.x, pointC.y);
  ctx.lineTo(pointE.x, pointE.y);
  ctx.lineTo(pointB.x, pointB.y);
  ctx.lineTo(pointD.x, pointD.y);
  ctx.lineTo(pointA.x, pointA.y);
  ctx.fillStyle = fillColor;
  ctx.lineWidth = lineWidth;
  ctx.fill();
  ctx.stroke();
}

下面我们来看两个示例：

示例1：绘制一个红色的五角星

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

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
drawStar(ctx, 150, 150, 50, 2, 'red');

示例2：绘制一个绿色的大五角星

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

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
drawStar(ctx, 300, 300, 200, 5, 'green');

以上就是“js+canvas绘制五角星的完整攻略”，希望对您有所帮助。