基本信息
源码名称:js实现 穿越星空效果图
源码大小:1.94KB
文件格式:.zip
开发语言:js
更新时间:2019-02-17
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):78630559
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
window.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;
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(255, 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(255, 255, 255, " star.o ")";
}
}
executeFrame();