基于canvas画布的星空效果

101 阅读 0 评论 67 点赞

我是靠谱客的博主天真啤酒，最近开发中收集的这篇文章主要介绍基于canvas画布的星空效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

canvas是HTML5的新标签，其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的，所以呢为了特效肯定是牺牲一定的兼容性。这里呢，分享一个基于canvas开发的浩瀚星河插件，其实这个源代码是网上下载的，我把它整合了一下，重新封装一些参数提供更多的可改项。

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

[html]  
   view plain 
    copy 
    
   
 <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>  
 <script src="canvas/cosmos_canvas.js" type="text/javascript" charset="utf-8"></script>  

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

[html]  
   view plain 
    copy 
    
   
 <canvas id="starts">该浏览器不支持canvas</canvas>  

cosmos_canvas.js脚本

[javascript]  
   view plain 
    copy 
    
   
 function canvas(id,starscolor,starsamount,starsradius,movrange,speed,trailing){  
     //宇宙特效  
 "use strict";  
 var canvas = 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;//星星数量  
   
 var canvas2 = document.createElement('canvas'),  
   ctx2 = canvas2.getContext('2d');  
 canvas2.width = 100;  
 canvas2.height = 100;  
 var half = 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();  
   
 // End cache  
   
 function random(min, max) {  
   if (arguments.length < 2) {  
     max = min;  
     min = 0;  
   }  
   
   if (min > max) {  
     var hold = max;  
     max = min;  
     min = hold;  
   }  
   
   return Math.floor(Math.random() * (max - min + 1)) + min;  
 }  
   
 function maxOrbit(x, y) {  
   var max = Math.max(x, y),  
     diameter = Math.round(Math.sqrt(max * max + max * max));  
   return diameter / movrange;  
   //星星移动范围，值越大范围越小，  
 }  
   
 var Star = 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() {  
   var x = 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;  
   } else if (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 (var i = 0; i < maxStars; i++) {  
   new Star();  
 }  
   
 function animation() {  
   ctx.globalCompositeOperation = 'source-over';  
   ctx.globalAlpha = trailing; //尾巴  
   ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';  
   ctx.fillRect(0, 0, w, h)  
   
   ctx.globalCompositeOperation = 'lighter';  
   for (var i = 1, l = stars.length; i < l; i++) {  
     stars[i].draw();  
   };  
   
   window.requestAnimationFrame(animation);  
 }  
   
 animation();  
 }  

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

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

效果：

HTML

[html]  
   view plain 
    copy 
    
   
 <canvas id="starts">该浏览器不支持canvas</canvas>  
 <canvas id="starts1">该浏览器不支持canvas</canvas>  
 <canvas id="starts2">该浏览器不支持canvas</canvas>  
 <canvas id="starts3">该浏览器不支持canvas</canvas>  

javascript

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