65 lines
1.7 KiB
HTML
65 lines
1.7 KiB
HTML
<canvas id="canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
|
|
<script>
|
|
var canvas = document.getElementById('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
var stars = [];
|
|
for (var i = 0; i < 300; i++) {
|
|
stars.push({
|
|
x: (Math.random() - 0.5) * canvas.width,
|
|
y: (Math.random() - 0.5) * canvas.height,
|
|
z: Math.random() * canvas.width,
|
|
pz: 0
|
|
});
|
|
}
|
|
|
|
var FPS = 15, lastFrame = 0;
|
|
|
|
function render(ts) {
|
|
requestAnimationFrame(render);
|
|
if (ts - lastFrame < 1000 / FPS) return;
|
|
lastFrame = ts;
|
|
|
|
var w = canvas.width, h = canvas.height;
|
|
var cx = w / 2, cy = h / 2;
|
|
ctx.fillStyle = 'rgba(2, 3, 12, 0.25)';
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
var speed = 8;
|
|
for (var i = 0; i < stars.length; i++) {
|
|
var s = stars[i];
|
|
s.z -= speed;
|
|
if (s.z <= 0) {
|
|
s.x = (Math.random() - 0.5) * w;
|
|
s.y = (Math.random() - 0.5) * h;
|
|
s.z = w;
|
|
s.pz = s.z;
|
|
}
|
|
var sx = (s.x / s.z) * w * 0.5 + cx;
|
|
var sy = (s.y / s.z) * h * 0.5 + cy;
|
|
var px = (s.x / s.pz) * w * 0.5 + cx;
|
|
var py = (s.y / s.pz) * h * 0.5 + cy;
|
|
s.pz = s.z;
|
|
var r = Math.max(0.5, (1 - s.z / w) * 2.5);
|
|
ctx.beginPath();
|
|
ctx.moveTo(px, py);
|
|
ctx.lineTo(sx, sy);
|
|
ctx.strokeStyle = 'rgba(200, 220, 255, ' + ((1 - s.z / w) * 0.8) + ')';
|
|
ctx.lineWidth = r;
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.arc(sx, sy, r * 0.6, 0, Math.PI * 2);
|
|
ctx.fillStyle = 'rgba(220, 235, 255, ' + ((1 - s.z / w) * 0.9) + ')';
|
|
ctx.fill();
|
|
}
|
|
}
|
|
requestAnimationFrame(render);
|
|
</script>
|