JS实现动态星空背景效果


Posted in Javascript onNovember 01, 2019

本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下

 JS实现动态星空背景效果

这里我截取的是一个图片,实际上是会动的。废话不多说,上代码。

HTML:

<canvas id="canvas"></canvas>

CSS:

/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
 margin: 0;
 padding: 0;
}
html,body {
 width: 100%;
 height: 100%;
}
body {
 font: 14px Microsoft YaHei;
 -webkit-text-size-adjust:100%;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 position: relative;
 background: #000;
}

#canvas {
 width: 100%;
 height: 100%;
 display: block;
 opacity: .8;
}

JS:

// 音量大小,0.01-1


//宇宙特效
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,

hue = 217,
stars = [],
count = 0,
maxStars = 1100;    //星星数量,默认1300
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 / 2;
 //星星移动范围,值越大范围越小,
}

var Star = function() {

 this.orbitRadius = random(maxOrbit(w, h));
 this.radius = random(60, this.orbitRadius) / 10;  //星星大小,值越大星星越小,默认8
 
 this.orbitX = w / 2;
 this.orbitY = h / 2;
 this.timePassed = random(0, maxStars);
 this.speed = random(this.orbitRadius) / 80000;  //星星移动速度,值越大越慢,默认5W
 
 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 = 0.5;         //尾巴
 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();

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

Javascript 相关文章推荐
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
vue 中固定导航栏的实例代码
Nov 01 #Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 #Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 #Javascript
Vue实现导航栏的显示开关控制
Nov 01 #Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 #Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
一个JS翻页效果
2007/07/23 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
JS中Location使用详解
2015/05/12 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
有趣的python小程序分享
2017/12/05 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python远程邮件控制电脑升级版
2019/05/23 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
大学生简历的个人自我评价
2013/12/04 职场文书
升职感谢信
2015/01/22 职场文书
社区节水倡议书
2015/04/29 职场文书