怎么在JavaScript中使用canvas實現(xiàn)一個旋轉(zhuǎn)星空效果-創(chuàng)新互聯(lián)

怎么在JavaScript中使用canvas實現(xiàn)一個旋轉(zhuǎn)星空效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)從2013年開始，先為岳陽樓等服務建站，岳陽樓等地企業(yè)，進行企業(yè)商務咨詢服務。為岳陽樓企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

首先引入兩個javascript腳本，一個是jquery插件，另一個是封裝好的cosmos_canvas.js

<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”

<canvas id="starts">該瀏覽器不支持canvas</canvas>

cosmos_canvas.js腳本

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;//星星數(shù)量
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();
}

調(diào)用方法：這里沒寫任何樣式所以默認情況下是全屏效果

$(function(){
//canvas的id名，星星顏色(hsla的hue色調(diào))，星星數(shù)量，星星半徑比，星星移動范圍(值越大范圍越小)，星星移動速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明顯)
canvas("starts",230,1000,60,2,50000,0.5);
});

效果：

然后我再加3個canvas，改些參數(shù)做效果對比吧

HTML

<canvas id="starts">該瀏覽器不支持canvas</canvas>
<canvas id="starts1">該瀏覽器不支持canvas</canvas>
<canvas id="starts2">該瀏覽器不支持canvas</canvas>
<canvas id="starts3">該瀏覽器不支持canvas</canvas>

javascript

$(function(){
  //canvas的id名，星星顏色(hsla的hue色調(diào))，星星數(shù)量，星星半徑比，星星移動范圍(值越大范圍越小)，星星移動速度(值越大速度越慢),星星拖尾效果(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");
});

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網(wǎng)站設(shè)計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章題目：怎么在JavaScript中使用canvas實現(xiàn)一個旋轉(zhuǎn)星空效果-創(chuàng)新互聯(lián)
標題來源：http://muchs.cn/article4/hihoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、服務器托管、靜態(tài)網(wǎng)站、Google、網(wǎng)站改版、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)