js星星怎么打出来的

使用JavaScript绘制星星图案

在使用JavaScript绘制星星图案时，可以利用Canvas API、SVG或纯HTML和CSS结合JavaScript。其中，Canvas API 是最常用的方法，因为它提供了强大的绘图功能和灵活的操作。接下来，我们将详细介绍如何使用Canvas API来绘制星星图案。

一、引入Canvas API

首先，在HTML文件中创建一个Canvas元素，这是绘制图形的基础。

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

在上面的代码中，创建了一个宽度和高度均为500的Canvas元素。接下来，将编写JavaScript代码来绘制星星。

二、绘制星星的核心算法

绘制星星的关键在于理解星星的几何形状。一个典型的五角星由两个正五边形交错构成。可以通过数学公式计算出星星的顶点坐标，然后利用Canvas API绘制出来。

1. 计算星星顶点

星星的顶点坐标可以通过简单的三角函数计算出来。假设星星的中心点坐标为 (cx, cy)，外圆的半径为 r，内圆的半径为 r/2，五角星的每个顶点的坐标可以通过以下公式计算：

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

2. 绘制星星

有了顶点坐标后，就可以使用Canvas API绘制星星了。

function drawStar(ctx, cx, cy, outerRadius, innerRadius, numPoints) {
    const points = calculateStarPoints(cx, cy, outerRadius, innerRadius, numPoints);
    ctx.beginPath();
    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();
    ctx.fill();
}
window.onload = function() {
    const canvas = document.getElementById('starCanvas');
    const ctx = canvas.getContext('2d');
    drawStar(ctx, 250, 250, 100, 50, 5);
};

三、优化和扩展

1. 添加颜色和样式

可以通过设置Canvas上下文的属性来改变星星的颜色和样式。

ctx.fillStyle = 'yellow';
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;

2. 动态生成多个星星

使用循环和随机数可以生成多个星星，并使其随机分布在画布上。

function drawRandomStars(ctx, numStars, canvasWidth, canvasHeight) {
    for (let i = 0; i < numStars; i++) {
        const cx = Math.random() * canvasWidth;
        const cy = Math.random() * canvasHeight;
        const outerRadius = Math.random() * 30 + 10;
        const innerRadius = outerRadius / 2;
        drawStar(ctx, cx, cy, outerRadius, innerRadius, 5);
    }
}
window.onload = function() {
    const canvas = document.getElementById('starCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'yellow';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    drawRandomStars(ctx, 50, canvas.width, canvas.height);
};

四、其他绘制方法

除了Canvas API，还可以使用SVG和HTML/CSS结合JavaScript的方法来绘制星星。

1. SVG方法

SVG提供了矢量图形绘制功能，可以直接在HTML文件中使用SVG标签来绘制星星。

<svg width="500" height="500">
    <polygon points="250,50 280,200 400,200 300,280 350,400 250,330 150,400 200,280 100,200 220,200" fill="yellow" stroke="black" stroke-width="2"/>
</svg>

2. HTML/CSS结合JavaScript

可以使用HTML和CSS来定义星星的形状，并使用JavaScript动态生成星星。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .star {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid yellow;
            position: absolute;
        }
        .star:before {
            content: "";
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid yellow;
            position: absolute;
            top: -75px;
            left: -50px;
        }
    </style>
    <title>CSS Star</title>
</head>
<body>
    <div id="starContainer"></div>
    <script>
        function createStar(x, y) {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.left = `${x}px`;
            star.style.top = `${y}px`;
            document.getElementById('starContainer').appendChild(star);
        }
        for (let i = 0; i < 50; i++) {
            const x = Math.random() * window.innerWidth;
            const y = Math.random() * window.innerHeight;
            createStar(x, y);
        }
    </script>
</body>
</html>

五、总结

使用JavaScript绘制星星图案的方法多种多样，其中最常用的是Canvas API，因为它提供了强大的绘图功能和灵活的操作。通过理解星星的几何形状，并利用三角函数计算顶点坐标，可以轻松实现星星的绘制。同时，还可以通过添加颜色和样式、动态生成多个星星等方式优化和扩展绘制效果。除此之外，SVG和HTML/CSS结合JavaScript的方法也提供了绘制星星的可行途径。根据具体需求，选择合适的方法，便能绘制出美观的星星图案。