js实现太阳
使用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>以上方法提供了从简单到复杂的多种实现方式，可以根据需求选择合适的技术方案。
