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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP自定义多进制的方法
2016/11/03 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
js获取php变量的实现代码
2013/08/10 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python实现的双色球生成功能示例
2017/12/18 Python
python3.x实现发送邮件功能
2018/05/22 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python+mysql实现教务管理系统
2019/02/20 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
金讯Java笔试题目
2013/06/18 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
学年自我鉴定范文
2013/10/01 职场文书
大学生求职简历的自我评价范文
2013/10/12 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
MySQL 数据类型详情
2021/11/11 MySQL