html js 3d z轴移动实现星空

以下是一个简单的HTML和JavaScript代码示例，用于创建一个简单的3D星空效果。这个示例使用了HTML5的canvas元素和JavaScript来绘制星星，并在3D空间中移动它们：




<!DOCTYPE html>
<html>
<head>
    <title>3D Star Sky</title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="starCanvas" width="800" height="600"></canvas>
 
    <script>
        const canvas = document.getElementById('starCanvas');
        const ctx = canvas.getContext('2d');
        const stars = [];
 
        // 星星类
        class Star {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.z = Math.random() * 1000; // 星星距离观察者的距离
                this.radius = Math.random() * 2;
                this.speed = Math.random() * 0.05;
            }
 
            // 绘制星星
            draw() {
                const scale = 1000 / (this.z + 1); // 近大远小的视觉效果
                const x = this.x * scale;
                const y = this.y * scale;
                ctx.beginPath();
                ctx.arc(x, y, this.radius * scale, 0, 2 * Math.PI);
                ctx.fillStyle = 'white';
                ctx.fill();
            }
 
            // 移动星星
            move() {
                this.z -= this.speed; // 星星向前移动
                if (this.z < 1) {
                    this.z = 1000; // 如果星星移出视野，重置其位置
                }
            }
        }
 
        // 初始化一些星星
        for (let i = 0; i < 100; i++) {
            stars.push(new Star());
        }
 
        // 绘制和移动星星
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            stars.forEach(star => {
                star.draw();
                star.move();
            });
            requestAnimationFrame(animate);
        }
 
        animate(); // 开始动画
    </script>
</body>
</html>

这段代码首先定义了一个星星类，它有位置、半径、速度和z轴位置。在动画函数animate中，它会清除画布，然后遍历所有星星，绘制它们，并调整move方法使它们沿着z轴移动。如果星星移出视野，它们会被重置到远处。这个简单的例子演示了如何使用HTML5的canvas和JavaScript创建基本的3D效果。

html js 3d z轴移动实现星空

评论已关闭

推荐阅读