使用JavaScript編寫一個旋轉(zhuǎn)星空效果-創(chuàng)新互聯(lián)

本文章向大家介紹使用JavaScript編寫一個旋轉(zhuǎn)星空效果，主要包括使用JavaScript編寫一個旋轉(zhuǎn)星空效果的使用實例、應(yīng)用技巧、基本知識點總結(jié)和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),嘉蔭企業(yè)網(wǎng)站建設(shè),嘉蔭品牌網(wǎng)站建設(shè),網(wǎng)站定制,嘉蔭網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,嘉蔭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。Java是什么

Java是一門面向?qū)ο缶幊陶Z言，可以編寫桌面應(yīng)用程序、Web應(yīng)用程序、分布式系統(tǒng)和嵌入式系統(tǒng)應(yīng)用程序。

具體內(nèi)容如下

<!DOCTYPE HTML>
<html lang="en">
 <head>
 <meta charset="utf8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="keywords" content="starry sky">
 <meta name="description" content="the starry sky">
 <title>旋轉(zhuǎn)的星空(the starry sky)</title>
 <style>
  body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  }
  #canvas {
  position: absolute;
  left: 0;
  }
  #starCanvasDiv {
  background-color: white;
  }
 </style>
 </head>
 <body>
 <canvas id="canvas">Your browser can not support canvas</canvas>
 <script>
  var doublePI = Math.PI * 2;

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var cx,cy;
  var starCanvas;
  var alphaChangeProbability = new AlphaChangeProbability();

  //色相
  var hue = 217;
  //星空背景顏色
  var bgColor = 'hsl(' + hue + ', 60%, 5%)';

  //畫布的外切圓半徑
  var canvasRadius;
  //每旋轉(zhuǎn)一圈要需要的幀數(shù)
  var radianStepCount;
  //星星的總個數(shù)
  var starCount;
  //群星
  var stars;

  function onResize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  cx = canvas.width / 2;
  cy = canvas.height / 2;
  canvasRadius = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2)) / 2;
  radianStepCount = canvasRadius * 100;
  starCount = parseInt((canvas.width + canvas.height) * 0.5);
  stars = [];
  for(var i=0; i<starCount; i++) {
   stars.push(new Star());
  }
  //初始時要先繪制一層背景,否則第一波星星走過的路徑會有畫布底料涂抹不均勻的感覺
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 1;
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  function init() {
  createStarCanvas();

  window.addEventListener("resize", onResize);
  onResize();
  loop();
  }

  //在[min, max)范圍內(nèi)隨機一個整數(shù)
  function randomInt(min, max) {
  if(arguments.length === 1) {
   max = min;
   min = 0;
  } else if(min > max) {
   var tmp = max;
   mix = min;
   min = tmp;
  }
  return Math.floor(Math.random() * (max - min) + min);
  }

  //透明度改變的概率
  function AlphaChangeProbability() {

  //透明度改變的步長
  var alphaStep = 0.05;

  //透明度增加
  var plus = 1;
  //透明度減少
  var minus = 1;
  //透明度不變
  var invariant = 8;

  //總概率
  var totalChance = plus + minus + invariant;

  //獲取隨機的透明度改變值
  function getRandomChangeValue() {
   var value = Math.random() * totalChance;
   if(value < plus) {
   return alphaStep;
   }
   value -= plus;
   if(value < minus) {
   return -alphaStep;
   }
   return 0;
  }

  //隨機改變alpha的值
  this.randomChangeAlpha = function(alpha) {
   alpha += getRandomChangeValue();
   if(alpha > 1) {
   alpha = 1;
   } else if(alpha < 0) {
   alpha = 0;
   }
   return alpha;
  }
  }

  //創(chuàng)建星星圖片
  function createStarCanvas() {
  starCanvas = document.createElement("canvas");
  var ctx = starCanvas.getContext("2d");
  starCanvas.width = 100;
  starCanvas.height = 100;
  var cx = starCanvas.width / 2;
  var cy = starCanvas.height / 2;
  var radius = Math.max(cx, cy);
  var gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
  gradient.addColorStop(0.025, '#CCC');
  gradient.addColorStop(0.1, 'hsl(' + hue + ', 65%, 35%)');
  gradient.addColorStop(0.25, bgColor);
  gradient.addColorStop(1, "transparent");
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, doublePI);
  ctx.fill();
  }

  //星體對象
  var Star = function() {
  //星體運行的軌道半徑
  this.orbitRadius = Math.random() * canvasRadius;
  //星體的半徑
  this.radius = randomInt(60, this.orbitRadius) / 8;
  //星體透明度
  this.alpha = Math.random();
  //相對軌道中心(即畫布中心)的角度
  this.theta = Math.random() * doublePI;
  //角速度
  this.speed = Math.random() * this.orbitRadius / radianStepCount;

  //獲取當(dāng)前坐標(biāo)
  this.getPos = function() {
   return {
   x: cx + this.orbitRadius * Math.cos(this.theta),
   y: cy + this.orbitRadius * Math.sin(this.theta)
   }
  }
  }

  Star.prototype.update = function() {
  this.alpha = alphaChangeProbability.randomChangeAlpha(this.alpha);
  this.theta += this.speed;
  this.pos = this.getPos();
  }

  Star.prototype.draw = function() {
  ctx.globalAlpha = this.alpha;
  ctx.drawImage(starCanvas, this.pos.x, this.pos.y, this.radius, this.radius);
  }

  function loop() {
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 0.5;
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "lighter";
  for(var i = 0; i < stars.length; i++) {
   stars[i].update();
   stars[i].draw();
  }
  //繪制星體圖樣
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 1;
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, starCanvas.width, starCanvas.height);
  ctx.drawImage(starCanvas, 0, 0, starCanvas.width, starCanvas.height);
  requestAnimationFrame(loop);
  }

  init();
 </script>
 </body>
</html>

使用JavaScript編寫一個旋轉(zhuǎn)星空效果

到此這篇關(guān)于使用JavaScript編寫一個旋轉(zhuǎn)星空效果的文章就介紹到這了，更多相關(guān)的內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！

網(wǎng)站題目：使用JavaScript編寫一個旋轉(zhuǎn)星空效果-創(chuàng)新互聯(lián)
分享路徑：http://muchs.cn/article10/dcpcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)頁設(shè)計公司、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、小程序開發(fā)、企業(yè)建站

廣告

聲明：本網(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)

h5響應(yīng)式網(wǎng)站建設(shè)