怎么用js打出五角星

要用JavaScript打出五角星，可以通过绘制图形的方法来实现，主要步骤包括：创建画布、定义五角星的顶点、使用Canvas API绘制五角星、调整样式。 下面详细介绍如何实现这个过程。

一、创建画布

要绘制五角星，首先需要一个画布元素。通过HTML和JavaScript，可以轻松地创建和操作画布。

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

在上面的代码中，我们创建了一个canvas元素，并设置了其宽度和高度。

二、定义五角星的顶点

五角星有五个顶点，可以通过几何计算来确定这些顶点的位置。假设五角星的中心在画布的中心点（cx, cy），顶点可以通过以下公式计算：

function getStarPoints(cx, cy, outerRadius, innerRadius) {
    let points = [];
    let angle = Math.PI / 5;
    for (let i = 0; i < 10; i++) {
        let radius = (i % 2 === 0) ? outerRadius : innerRadius;
        let x = cx + radius * Math.sin(i * angle);
        let y = cy - radius * Math.cos(i * angle);
        points.push({x: x, y: y});
    }
    return points;
}

在这个函数中，outerRadius和innerRadius分别是五角星的外部和内部顶点的半径。

三、使用Canvas API绘制五角星

通过Canvas API，可以将五角星绘制到画布上：

function drawStar(ctx, cx, cy, outerRadius, innerRadius) {
    ctx.beginPath();
    let points = getStarPoints(cx, cy, outerRadius, innerRadius);
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.closePath();
    ctx.stroke();
}

四、调整样式

可以通过Canvas API设置五角星的颜色和线宽等样式：

function drawStyledStar(ctx, cx, cy, outerRadius, innerRadius, fillColor, strokeColor, lineWidth) {
    ctx.beginPath();
    let points = getStarPoints(cx, cy, outerRadius, innerRadius);
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.closePath();
    ctx.fillStyle = fillColor;
    ctx.fill();
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = lineWidth;
    ctx.stroke();
}

五、完整示例

以下是完整的代码示例，将上述所有步骤结合在一起：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw Star</title>
</head>
<body>
    <canvas id="starCanvas" width="500" height="500"></canvas>
    <script>
        function getStarPoints(cx, cy, outerRadius, innerRadius) {
            let points = [];
            let angle = Math.PI / 5;
            for (let i = 0; i < 10; i++) {
                let radius = (i % 2 === 0) ? outerRadius : innerRadius;
                let x = cx + radius * Math.sin(i * angle);
                let y = cy - radius * Math.cos(i * angle);
                points.push({x: x, y: y});
            }
            return points;
        }
        function drawStyledStar(ctx, cx, cy, outerRadius, innerRadius, fillColor, strokeColor, lineWidth) {
            ctx.beginPath();
            let points = getStarPoints(cx, cy, outerRadius, innerRadius);
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) {
                ctx.lineTo(points[i].x, points[i].y);
            }
            ctx.closePath();
            ctx.fillStyle = fillColor;
            ctx.fill();
            ctx.strokeStyle = strokeColor;
            ctx.lineWidth = lineWidth;
            ctx.stroke();
        }
        window.onload = function() {
            let canvas = document.getElementById('starCanvas');
            let ctx = canvas.getContext('2d');
            drawStyledStar(ctx, 250, 250, 100, 50, '#FFD700', '#FF4500', 5);
        };
    </script>
</body>
</html>

结论

通过上述步骤，我们可以利用JavaScript和Canvas API绘制一个漂亮的五角星。这种方法不仅简单易行，还可以通过调整参数（如颜色、线宽和半径）来创建各种风格的五角星。