当前位置：首页 > JavaScript

js实现太阳

2026-04-05 05:03:45JavaScript

使用Canvas绘制太阳动画

以下是一个使用JavaScript和HTML5 Canvas绘制动态太阳效果的实现方法，包含发光效果和简单动画：

<!DOCTYPE html>
<html>
<head>
    <title>太阳动画</title>
    <style>
        body { margin: 0; overflow: hidden; background: #87CEEB; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="sunCanvas"></canvas>
    <script>
        const canvas = document.getElementById('sunCanvas');
        const ctx = canvas.getContext('2d');

        // 设置画布大小为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 太阳属性
        const sun = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 100,
            rays: 12,
            rayLength: 150,
            color: '#FFD700',
            glowColor: 'rgba(255, 215, 0, 0.5)',
            angle: 0,
            pulse: 0
        };

        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制太阳光芒
            drawSunGlow();

            // 绘制太阳
            drawSun();

            // 更新动画参数
            sun.angle += 0.01;
            sun.pulse = Math.sin(sun.angle) * 0.1 + 1;

            requestAnimationFrame(animate);
        }

        function drawSunGlow() {
            const gradient = ctx.createRadialGradient(
                sun.x, sun.y, sun.radius,
                sun.x, sun.y, sun.radius * 3
            );
            gradient.addColorStop(0, sun.glowColor);
            gradient.addColorStop(1, 'rgba(255, 215, 0, 0)');

            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.arc(sun.x, sun.y, sun.radius * 3, 0, Math.PI * 2);
            ctx.fill();
        }

        function drawSun() {
            // 绘制光芒射线
            ctx.save();
            ctx.translate(sun.x, sun.y);

            for (let i = 0; i < sun.rays; i++) {
                const angle = (i * (Math.PI * 2 / sun.rays)) + sun.angle;
                const x1 = Math.cos(angle) * sun.radius;
                const y1 = Math.sin(angle) * sun.radius;
                const x2 = Math.cos(angle) * (sun.radius + sun.rayLength * sun.pulse);
                const y2 = Math.sin(angle) * (sun.radius + sun.rayLength * sun.pulse);

                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.lineWidth = 8;
                ctx.strokeStyle = sun.color;
                ctx.stroke();
            }

            ctx.restore();

            // 绘制太阳主体
            ctx.beginPath();
            ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
            ctx.fillStyle = sun.color;
            ctx.fill();
        }

        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            sun.x = canvas.width / 2;
            sun.y = canvas.height / 2;
        });

        animate();
    </script>
</body>
</html>