js实现夜空 干货比较多
生活随笔
收集整理的這篇文章主要介紹了
js实现夜空 干货比较多
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
呈現效果，第一次寫博客，索性就截了個靜態圖
?HTML和CSS部分：
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><style>html,body {padding: 0px;margin: 0px;width: 100%;height: 100%;}html{background-color: black;}body{background: url(./夜空背景.png) center/cover ;background-position: 0 -100px;background-repeat: no-repeat;position: absolute;}.container {width: 100%;height: 100%;}.content {width: inherit;height: inherit;}#universe {width: 100%;height: 100%;}</style> </head><body><div class="container"><div class="content"><canvas id="universe"></canvas></div></div></div></body> <script src="./text.js"></script> </html>JavaScript部分:?
window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame var starDensity=.216; var speedCoeff=.05; var width; var height; var starCount; var first=true; var giantColor='180,184,240'; var starColor='226,225,142'; var cometColor='226,225,224'; var canva=document.getElementById('universe'); var stars=[]; width=window.innerWidth; height=window.innerHeight; starCount=width*starDensity; canva.setAttribute('width',width); // setAttribute(name, value) // 參數 name 和 value 分別表示屬性名稱和屬性值。屬性名和屬性值必須以字符串的形式進行傳遞。如果元素中存在指定的屬性，它的值將被刷新；如果不存在，則 setAttribute() 方法將為元素創建該屬性并賦值。 canva.setAttribute('height',height); createUniverse(); function createUniverse(){universe=canva.getContext('2d')//創建一個CanvasRenderingContext2D對象作為2D渲染的上下文。for(var i=0;i<starCount;i++){stars[i]=new Star();stars[i].reset();}draw(); } function draw(){universe.clearRect(0,0,width,height); //clearRect()方法可以清空指定矩形區域內的繪圖var starsLength=stars.length;for(var i=0;i<starsLength;i++){var star=stars[i];star.move();star.fadeIn();star.fadeOut();star.draw();}window.requestAnimationFrame(draw); } function Star(){//匿名函數this.reset = function() {this.giant = getProbability(3);//函數getProbability()函數輸出的是true和falsethis.comet = this.giant || first ? false : getProbability(10);this.x = getRandInterval(-100, width - 10);//在一定的視圖內隨機生成x值this.y = getRandInterval(0, height);//在一定的視圖內隨機生成y值 由x和y值就可以得到隨機產生的星星的位置this.r = getRandInterval(1.1, 2.6);//隨機獲取的小星星的半徑this.dx = getRandInterval(speedCoeff, 6 * speedCoeff) + this.comet* speedCoeff * getRandInterval(50, 120) + speedCoeff * 2;//控制控制的位置變化可以理解為this.comet* speedCoeff * getRandInterval(50, 120) + speedCoeff * 2是為了是星星具有不同的速度this.dy = -getRandInterval(speedCoeff, 6 * speedCoeff) - this.comet* speedCoeff *getRandInterval(50, 120);// 這個dy的取值為負這是由于星星要往上移動，速度不能太大 這也就是為什么 dx比dy多加了個speedCoeff*2;this.fadingin=truethis.fadingout=null;this.opacity=0;this.opacityTresh=getRandInterval(.2,1-this.comet*.4);//星星的透明度的最大值就是opaciTrushthis.do=getRandInterval(0.0005,0.002)+this.comet*.001;};// 星星的透明度會一直變化，先是以this.do的速度增加 當this.opacity>this.opacityTresh保持不變 最后 超出move方法中的范圍(this.x > width - (width / 4)) || this.y < 0)fadingOut就為true執行漸變消失程序直至消失// 這個消失和出現的時間取決于 隨機出現的位置也就是(this.x和this.y的值都是隨機出現的)、this.do的值，如果do的值大 那么變化的速率就會大大提升，反之則降低、this.opacityTresh的值，這個值是星星的最大透明度this.fadeIn = function() {if (this.fadingin) {this.fadingin = this.opacity > this.opacityTresh ? false : true;this.opacity += this.do;//隨著星星的移動星星的透明度增加}};this.fadeOut = function() {if (this.fadingout) {this.fadingout = this.opacity < 0 ? false : true;this.opacity -= this.do / 2;if (this.x > width || this.y < 0) {this.fadingout = false;this.reset();//可以這樣理解//由上文中的starCount=width*starDensity;可以得到星星的數量不會發生改變，星星的消失有兩種// 1.星星在運動的時候自然消失(在下文中move方法中會進行判斷)// 2.星星在運動的時候并未消失，但是直接大于視圖范圍而消失就是上述條件(this.x > width || this.y < 0)}}};this.draw = function() {universe.beginPath();//這個位置就是計算出星星的顏色和半徑形狀//if(this.giant)繪畫大一點的星星//if(this.comet)繪畫流星//else則是繪畫小星星if (this.giant) {universe.fillStyle = 'rgba(' + giantColor + ',' + this.opacity + ')';universe.arc(this.x, this.y, 20, 0, 2 * Math.PI, false);// universe.arc(x,y,r,sAngle,eAngle,counterclockwise);// (xy中心點，r 半徑，開始角，結束角，順/逆時針 False = 順時針，true = 逆時針)} else if (this.comet) {universe.fillStyle = 'rgba(' + cometColor + ',' + this.opacity + ')';universe.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false);//comet tailfor (var i = 0; i < 30; i++) {universe.fillStyle = 'rgba(' + cometColor + ',' + (this.opacity - (this.opacity / 20) * i) + ')';universe.rect(this.x - this.dx / 4 * i, this.y - this.dy / 4 * i - 2, 5, 2);universe.fill();//canva.getText()}}else {universe.fillStyle = 'rgba(' + starColor + ',' + this.opacity + ')';universe.rect(this.x, this.y, this.r, this.r);// Rect（左上角 x 坐標 ， 左上角 y 坐標，矩形的寬，矩形的高）}universe.closePath();universe.fill();//填充};this.move = function() {this.x += this.dx;this.y += this.dy;if (this.fadingout === false) {this.reset();}if ((this.x > width - (width / 4)) || this.y < 0) {this.fadingout = true;}//當(this.x > width - (width / 4)) || this.y < 0 fadingOut方法就會被執行};(function() {setTimeout(function() {first = false;}, 50)//這一步很關鍵就是開始頁面中 會先只有小星星，然后就會慢慢出現大星星和流星})()} function getProbability(percents){return ((Math.floor(Math.random()*1000)+1)<percents*10); } function getRandInterval(min,max){return (Math.random()*(max-min)+min); }requestAnimationFrame 的簡介：<requeAnimationFrame詳解>
requestAnimationFrame是瀏覽器用于定時循環操作的一個接口，類似于setTimeout，主要用途是按幀對網頁進行重繪。
設置這個API的目的是為了讓各種網頁動畫效果（DOM動畫、Canvas動畫、SVG動畫、WebGL動畫）能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。代碼中使用這個API，就是告訴瀏覽器希望執行一個動畫，讓瀏覽器在下一個動畫幀安排一次網頁重繪。
?requestAnimationFrame的特點：
- requestAnimationFrame() 可以自動匹配設備幀率來展示動畫（120幀就每秒執行120次）。
- 高性能且不會出現動畫卡頓
?目前，高版本瀏覽器Firefox 23 / IE 10 / Chrome / Safari）都支持這個方法。可以用下面的方法，檢查瀏覽器是否支持這個API。如果不支持，則自行模擬部署該方法。
window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFramecancelAnimationFrame與clearInterval用法一樣，用來清除動畫
<script>var x=1;(function move(){x+=1;console.log(x)xiao=requestAnimationFrame(move)if(x===500){cancelAnimationFrame(xiao)}})() </script>總結
以上是生活随笔為你收集整理的js实现夜空 干货比较多的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2008年上半年中国移动通信增值市场特征
- 下一篇： react实现表头固定左侧，内容右侧循环