JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码，供大家参考，具体内容如下
这里我截取的是一个图片，实际上是会动的。废话不多说，上代码。
HTML：
CSS：
/*cssreset*/
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
body{
font:14pxMicrosoftYaHei;
-webkit-text-size-adjust:100%;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
position:relative;
background:#000;
}
#canvas{
width:100%;
height:100%;
display:block;
opacity:.8;
}
JS：
//音量大小,0.01-1
//宇宙特效
varcanvas=document.getElementById('canvas'),
ctx=canvas.getContext('2d'),
w=canvas.width=window.innerWidth,
h=canvas.height=window.innerHeight,
hue=217,
stars=[],
count=0,
maxStars=1100;//星星数量,默认1300
varcanvas2=document.createElement('canvas'),
ctx2=canvas2.getContext('2d');
canvas2.width=100;
canvas2.height=100;
varhalf=canvas2.width/2,
gradient2=ctx2.createRadialGradient(half,half,0,half,half,half);
gradient2.addColorStop(0.025,'#CCC');
gradient2.addColorStop(0.1,'hsl('+hue+',61%,33%)');
gradient2.addColorStop(0.25,'hsl('+hue+',64%,6%)');
gradient2.addColorStop(1,'transparent');
ctx2.fillStyle=gradient2;
ctx2.beginPath();
ctx2.arc(half,half,half,0,Math.PI*2);
ctx2.fill();
//Endcache
functionrandom(min,max){
if(arguments.length<2){
max=min;
min=0;
}
if(min>max){
varhold=max;
max=min;
min=hold;
}
returnMath.floor(Math.random()*(max-min+1))+min;
}
functionmaxOrbit(x,y){
varmax=Math.max(x,y),
diameter=Math.round(Math.sqrt(max*max+max*max));
returndiameter/2;
//星星移动范围，值越大范围越小，
}
varStar=function(){
this.orbitRadius=random(maxOrbit(w,h));
this.radius=random(60,this.orbitRadius)/10;//星星大小,值越大星星越小,默认8
this.orbitX=w/2;
this.orbitY=h/2;
this.timePassed=random(0,maxStars);
this.speed=random(this.orbitRadius)/80000;//星星移动速度,值越大越慢,默认5W
this.alpha=random(2,10)/10;
count++;
stars[count]=this;
}
Star.prototype.draw=function(){
varx=Math.sin(this.timePassed)*this.orbitRadius+this.orbitX,
y=Math.cos(this.timePassed)*this.orbitRadius+this.orbitY,
twinkle=random(10);
if(twinkle===1&&this.alpha>0){
this.alpha-=0.05;
}elseif(twinkle===2&&this.alpha<1){
this.alpha+=0.05;
}
ctx.globalAlpha=this.alpha;
ctx.drawImage(canvas2,x-this.radius/2,y-this.radius/2,this.radius,this.radius);
this.timePassed+=this.speed;
}
for(vari=0;i
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。