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 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
javascript函数特点实例分析
May 14 Javascript
javascript实现Table排序的方法
May 15 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python连接oracle数据库实例
2014/10/17 Python
python实现2048小游戏
2015/03/30 Python
python实现括号匹配的思路详解
2018/08/23 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
numpy.random模块用法总结
2019/05/27 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
用python进行视频剪辑
2020/11/02 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
外企测试工程师面试题
2015/02/01 面试题
JAVA高级程序员面试题
2013/09/06 面试题
公司授权委托书范本
2014/04/03 职场文书
实习单位鉴定评语
2014/04/26 职场文书
好的促销活动方案
2014/08/21 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android