怎么在JavaScript中使用canvas实现一个旋转星空效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
首先引入两个javascript脚本，一个是jquery插件，另一个是封装好的cosmos_canvas.js
HTML，当然如果浏览器不支持canvas的话，运行程序没效果，并显示“该浏览器不支持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调用方法：这里没写任何样式所以默认情况下是全屏效果
$(function(){
//canvas的id名，星星颜色(hsla的hue色调)，星星数量，星星半径比，星星移动范围(值越大范围越小)，星星移动速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)
canvas("starts",230,1000,60,2,50000,0.5);
});效果：
然后我再加3个canvas，改些参数做效果对比吧
HTML
该浏览器不支持canvas
该浏览器不支持canvas
该浏览器不支持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");
});看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。
