时间：2023-06-07 12:27:02 | 来源：网站运营
时间：2023-06-07 12:27:02 来源：网站运营
编写一个HTML文件实现炫酷动态星空图：首先，打开电脑
在线咨询
<!doctype html><html><head><meta charset="utf-8"><title>星空屏保</title><style>html,body { height: 100%; max-width: 100%; margin: 0; overflow: hidden; font-family: sans-serif}#space { width: 100%}#warp { position: absolute; z-index: 9; bottom: 0; left: 0; right: 0; margin: 20px auto; color: rgba(209, 255, 255, 1); border: 2px solid; padding: 1em; width: 10em; text-align: center; font-weight: 700; font-size: 1.2em; display: inline-block; text-decoration: none; background: rgba(0, 0, 0, 0.8)}</style></head><body><canvas id="space"></canvas><a href="#" id="warp">WARP SPEED</a><script>//based on an Example by @curranwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame})();var canvas = document.getElementById("space");var c = canvas.getContext("2d");var numStars = 1900;var radius = '0.'+Math.floor(Math.random() * 9) + 1 ;var focalLength = canvas.width *2;var warp = 0;var centerX, centerY;var stars = [], star;var i;var animate = true;initializeStars();function executeFrame(){ if(animate) requestAnimFrame(executeFrame); moveStars(); drawStars();}function initializeStars(){ centerX = canvas.width / 2; centerY = canvas.height / 2; stars = []; for(i = 0; i < numStars; i++){ star = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, z: Math.random() * canvas.width, o: '0.'+Math.floor(Math.random() * 99) + 1 }; stars.push(star); }}function moveStars(){ for(i = 0; i < numStars; i++){ star = stars[i]; star.z--; if(star.z <= 0){ star.z = canvas.width; } }}function drawStars(){ var pixelX, pixelY, pixelRadius; // Resize to the screen if(canvas.width != window.innerWidth || canvas.width != window.innerWidth){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; initializeStars(); } if(warp==0) {c.fillStyle = "rgba(0,10,20,1)"; c.fillRect(0,0, canvas.width, canvas.height);} c.fillStyle = "rgba(209, 255, 255, "+radius+")"; for(i = 0; i < numStars; i++){ star = stars[i]; pixelX = (star.x - centerX) * (focalLength / star.z); pixelX += centerX; pixelY = (star.y - centerY) * (focalLength / star.z); pixelY += centerY; pixelRadius = 1 * (focalLength / star.z); c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius); c.fillStyle = "rgba(209, 255, 255, "+star.o+")"; //c.fill(); }}document.getElementById('warp').addEventListener("click",function(e){ window.c.beginPath(); window.c.clearRect(0, 0, window.canvas.width, window.canvas.height); window.warp = warp ? 0 : 1; executeFrame();});executeFrame();</script></body></html>关键词：动态,星空,实现,文件,编写
