当前位置：首页 > JavaScript

js实现太阳

2026-01-31 12:54:14JavaScript

使用Canvas绘制太阳

在JavaScript中，可以通过HTML5的Canvas API绘制一个简单的太阳。以下是一个基础的实现示例：

<!DOCTYPE html>
<html>
<head>
    <title>太阳绘制</title>
</head>
<body>
    <canvas id="sunCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('sunCanvas');
        const ctx = canvas.getContext('2d');

        // 绘制太阳主体
        ctx.beginPath();
        ctx.arc(200, 200, 100, 0, Math.PI * 2);
        ctx.fillStyle = 'yellow';
        ctx.fill();

        // 绘制太阳光芒
        for (let i = 0; i < 12; i++) {
            const angle = (i * Math.PI / 6);
            const x1 = 200 + Math.cos(angle) * 100;
            const y1 = 200 + Math.sin(angle) * 100;
            const x2 = 200 + Math.cos(angle) * 150;
            const y2 = 200 + Math.sin(angle) * 150;

            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'orange';
            ctx.stroke();
        }
    </script>
</body>
</html>

使用CSS动画创建太阳效果

通过CSS也可以实现一个动态的太阳效果，结合简单的HTML和CSS动画：

<!DOCTYPE html>
<html>
<head>
    <style>
        .sun {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, yellow, orange);
            border-radius: 50%;
            position: relative;
            animation: shine 2s infinite alternate;
        }

        .ray {
            position: absolute;
            background: orange;
            width: 120px;
            height: 5px;
            top: 50%;
            left: 50%;
            transform-origin: left center;
        }

        @keyframes shine {
            from { box-shadow: 0 0 10px yellow; }
            to { box-shadow: 0 0 30px yellow; }
        }
    </style>
</head>
<body>
    <div class="sun"></div>
    <script>
        const sun = document.querySelector('.sun');
        for (let i = 0; i < 12; i++) {
            const ray = document.createElement('div');
            ray.className = 'ray';
            ray.style.transform = `rotate(${i * 30}deg)`;
            sun.appendChild(ray);
        }
    </script>
</body>
</html>

使用Three.js创建3D太阳

如果需要更复杂的效果，可以使用Three.js库创建一个3D太阳：

<!DOCTYPE html>
<html>
<head>
    <title>3D太阳</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 创建太阳几何体
        const geometry = new THREE.SphereGeometry(1, 32, 32);
        const material = new THREE.MeshBasicMaterial({ 
            color: 0xFFFF00,
            wireframe: false
        });
        const sun = new THREE.Mesh(geometry, material);
        scene.add(sun);

        // 添加光照效果
        const light = new THREE.PointLight(0xFFFF00, 1, 100);
        light.position.set(0, 0, 0);
        scene.add(light);

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            sun.rotation.x += 0.01;
            sun.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

使用SVG绘制太阳

SVG也是实现矢量太阳的好方法：

<!DOCTYPE html>
<html>
<head>
    <title>SVG太阳</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 400 400">
        <!-- 太阳主体 -->
        <circle cx="200" cy="200" r="100" fill="yellow" stroke="orange" stroke-width="5"/>

        <!-- 太阳光芒 -->
        <g stroke="orange" stroke-width="5">
            <line x1="200" y1="100" x2="200" y2="50"/>
            <line x1="200" y1="300" x2="200" y2="350"/>
            <line x1="100" y1="200" x2="50" y2="200"/>
            <line x1="300" y1="200" x2="350" y2="200"/>
            <line x1="150" y1="150" x2="120" y2="120"/>
            <line x1="250" y1="150" x2="280" y2="120"/>
            <line x1="150" y1="250" x2="120" y2="280"/>
            <line x1="250" y1="250" x2="280" y2="280"/>
        </g>
    </svg>
</body>
</html>

以上方法提供了从简单到复杂的多种实现方式，可以根据需求选择合适的技术方案。

js实现太阳