简要教程
这是一款html5 canvas炫酷旋转银河系星空背景特效。该特效通过canvas来绘制银河系星盘，并制作星系旋转的效果，非常炫酷。
使用方法
HTML结构
该旋转银河系星空背景特效的HTML结果只需要一个元素即可。
JavaScript
然后通过下面的js代码来在canvas上绘制银河系，以及制作动画效果。
"usestrict";
varcanvas=document.getElementById('canvas'),
ctx=canvas.getContext('2d'),
w=canvas.width=window.innerWidth,
h=canvas.height=window.innerHeight,
hue=217,
stars=[],
count=0,
maxStars=1400;
//Cachegradient
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,'#fff');
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
max=min;
min=0;
}
if(min>max){
varhold=max;
max=min;
min=hold;
}
returnMath.floor(Math.random()*(max-min+1))+min;
}
varStar=function(){
this.orbitRadius=random(w/2-50);
this.radius=random(100,this.orbitRadius)/10;
this.orbitX=w/2;
this.orbitY=h/2;
this.timePassed=random(0,maxStars);
this.speed=random(this.orbitRadius)/100000;
this.alpha=random(2,10)/10;
count++;
stars[count]=this;
}
Star.prototype.draw=function(){
varx=Math.sin(this.timePassed+1)*this.orbitRadius+this.orbitX,
y=Math.cos(this.timePassed)*this.orbitRadius/2+this.orbitY,
twinkle=random(10);
if(twinkle===1&&this.alpha>0){
this.alpha-=0.05;
}elseif(twinkle===2&&this.alpha
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
newStar();
}
functionanimation(){
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=0.8;
ctx.fillStyle='hsla('+hue+',64%,6%,1)';
ctx.fillRect(0,0,w,h)
ctx.globalCompositeOperation='lighter';
for(vari=1,l=stars.length;i
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！
