js中五角星怎么打

在JavaScript中绘制五角星涉及到使用HTML5的<canvas>元素和Canvas API。以下是详细的步骤和代码示例，帮助你在网页上绘制一个五角星。使用Canvas API绘制五角星、设置Canvas属性、计算五角星的坐标、绘制路径。

一、设置Canvas

首先，你需要在HTML中创建一个<canvas>元素，并指定其宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw a Star</title>
</head>
<body>
    <canvas id="starCanvas" width="500" height="500"></canvas>
    <script src="drawStar.js"></script>
</body>
</html>

二、获取Canvas上下文

在JavaScript文件中，你需要获取Canvas的2D绘图上下文，以便执行绘图操作。

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

三、计算五角星的坐标

五角星的绘制需要计算其五个顶点的坐标。通过数学公式，可以计算出这些顶点的位置。

function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
    let rot = Math.PI / 2 * 3;
    let x = cx;
    let y = cy;
    const step = Math.PI / spikes;
    ctx.beginPath();
    ctx.moveTo(cx, cy - outerRadius);
    for (let i = 0; i < spikes; i++) {
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        ctx.lineTo(x, y);
        rot += step;
        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        ctx.lineTo(x, y);
        rot += step;
    }
    ctx.lineTo(cx, cy - outerRadius);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'blue';
    ctx.stroke();
    ctx.fillStyle = 'skyblue';
    ctx.fill();
}
drawStar(ctx, 250, 250, 5, 100, 50);

四、详细解析

设置Canvas：
- 在HTML中，创建一个<canvas>元素，并设置其宽度和高度，以便定义绘图区域。
获取Canvas上下文：
- 使用getContext('2d')方法获取Canvas的2D绘图上下文，这是进行绘图操作的基础。
计算五角星的坐标：
- drawStar函数接受多个参数：绘图上下文ctx、中心点的x和y坐标cx和cy、星星的尖数spikes、外半径outerRadius和内半径innerRadius。
- 使用数学公式计算五角星的顶点位置，通过循环计算每个顶点的x和y坐标，并绘制路径。
绘制路径：
- 使用ctx.beginPath()开始绘制路径，ctx.moveTo()移动到起始点，然后使用ctx.lineTo()绘制线条，最后使用ctx.closePath()关闭路径。
- 使用ctx.stroke()和ctx.fill()方法分别绘制星星的轮廓和填充颜色。

五、扩展与优化

为了让五角星的绘制更加灵活和美观，可以进一步优化代码，比如添加更多的自定义选项，如颜色、线宽等，或者实现动态绘制五角星的功能。

function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius, options = {}) {
    const {strokeColor = 'blue', fillColor = 'skyblue', lineWidth = 5} = options;
    let rot = Math.PI / 2 * 3;
    let x = cx;
    let y = cy;
    const step = Math.PI / spikes;
    ctx.beginPath();
    ctx.moveTo(cx, cy - outerRadius);
    for (let i = 0; i < spikes; i++) {
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        ctx.lineTo(x, y);
        rot += step;
        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        ctx.lineTo(x, y);
        rot += step;
    }
    ctx.lineTo(cx, cy - outerRadius);
    ctx.closePath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
    ctx.fillStyle = fillColor;
    ctx.fill();
}
drawStar(ctx, 250, 250, 5, 100, 50, {strokeColor: 'red', fillColor: 'yellow', lineWidth: 3});

通过上面的代码，你可以在网页上动态绘制五角星，并且可以自定义五角星的颜色和线宽等属性。这样不仅提高了代码的可读性和可维护性，还增加了灵活性。