js实现旋转的星空效果


Posted in Javascript onNovember 01, 2019

本文实例为大家分享了js实现旋转的星空效果的具体代码,供大家参考,具体内容如下

<!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>旋转的星空(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;
  //每旋转一圈要需要的帧数
  var radianStepCount;
  //星星的总个数
  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)范围内随机一个整数
  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;
  }
  }

  //创建星星图片
  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;

  //获取当前坐标
  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>

js实现旋转的星空效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
浅谈小程序globalData的那些事儿
Nov 01 #Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 #Javascript
vue实现配置全局访问路径头(axios)
Nov 01 #Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 #Javascript
js实现漂亮的星空背景
Nov 01 #Javascript
Vue实现push数组并删除的例子
Nov 01 #Javascript
vue实现跳转接口push 转场动画示例
Nov 01 #Javascript
You might like
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php查看网页源代码的方法
2015/03/13 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JQuery标签页效果实例详解
2015/12/24 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
浅析vue-router原理
2018/10/19 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
在Python下尝试多线程编程
2015/04/28 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
使用python编写监听端
2018/04/12 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python 支持向量机分类器的实现
2020/01/15 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Windows和Linux动态库应用异同
2016/04/17 面试题
学校介绍信范文
2014/01/14 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers