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 相关文章推荐
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
简单实现js轮播图效果
Jul 14 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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 strtok()函数的优点分析
2010/03/02 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
小学生自我评价范例
2013/09/24 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
实习鉴定评语
2014/01/19 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年团队工作总结
2014/11/24 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python