怎么在JavaScript中使用canvas实现一个旋转星空效果

怎么在JavaScript中使用canvas实现一个旋转星空效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

首先引入两个javascript脚本，一个是jquery插件，另一个是封装好的cosmos_canvas.js

<scriptsrc="js/jquery-1.11.0.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="canvas/cosmos_canvas.js"type="text/javascript"charset="utf-8"></script>

HTML，当然如果浏览器不支持canvas的话，运行程序没效果，并显示“该浏览器不支持canvas”

<canvasid="starts">该浏览器不支持canvas</canvas>

cosmos_canvas.js脚本

functioncanvas(id,starscolor,starsamount,starsradius,movrange,speed,trailing){
//宇宙特效
"usestrict";
varcanvas=document.getElementById(id),
ctx=canvas.getContext('2d'),
w=canvas.width=window.innerWidth,
h=canvas.height=window.innerHeight,
hue=starscolor,//230
stars=[],
count=0,
maxStars=starsamount;//星星数量
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/movrange;
//星星移动范围，值越大范围越小，
}
varStar=function(){
this.orbitRadius=random(maxOrbit(w,h));
this.radius=random(starsradius,this.orbitRadius)/8;
//星星半径大小
this.orbitX=w/2;
this.orbitY=h/2;
this.timePassed=random(0,maxStars);
this.speed=random(this.orbitRadius)/speed;
//星星移动速度
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<maxStars;i++){
newStar();
}
functionanimation(){
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=trailing;//尾巴
ctx.fillStyle='hsla('+hue+',64%,6%,2)';
ctx.fillRect(0,0,w,h)
ctx.globalCompositeOperation='lighter';
for(vari=1,l=stars.length;i<l;i++){
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
}

调用方法：这里没写任何样式所以默认情况下是全屏效果

$(function(){
//canvas的id名，星星颜色(hsla的hue色调)，星星数量，星星半径比，星星移动范围(值越大范围越小)，星星移动速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)
canvas("starts",230,1000,60,2,50000,0.5);
});

效果：

然后我再加3个canvas，改些参数做效果对比吧

HTML

<canvasid="starts">该浏览器不支持canvas</canvas>
<canvasid="starts1">该浏览器不支持canvas</canvas>
<canvasid="starts2">该浏览器不支持canvas</canvas>
<canvasid="starts3">该浏览器不支持canvas</canvas>

javascript

$(function(){
//canvas的id名，星星颜色(hsla的hue色调)，星星数量，星星半径比，星星移动范围(值越大范围越小)，星星移动速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)
canvas("starts",230,1000,60,2,50000,0.5);
canvas("starts1",160,800,70,2.5,55000,0.4);
canvas("starts2",80,600,80,3,60000,0.3);
canvas("starts3",0,400,90,3.5,65000,0.2);
$("canvas").width($(window).width()/2);
$("canvas").height($(window).height()/2);
$("canvas").css("float","left");
});

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。