python画动态星空壁纸_JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下
这里我截取的是一个图片,实际上是会动的。废话不多说,上代码。
HTML:
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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
python画动态星空壁纸_JS实现动态星空背景效果相关推荐
- python数码管动态时钟壁纸_8个动态数码管时钟显示
8 个动态数码管时钟显示 #include #define uint unsigned int #define uchar unsigned char uchar i,temp,aa,miao,fen ...
- python画地球仪_Python pyecharts制作一个动态地球仪
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 以下文章来源于python数据分析之禅 ,作者鸟哥 今天教大家用pyechart ...
- 用python画动态樱花_利用python画一棵漂亮的樱花树,turtle画图代码大全,此处感谢知乎大佬小白...
利用python画一棵漂亮的樱花树,turtle画图代码大全,此处感谢知乎大佬小白 此处感谢知乎大佬 小白练手 练习一下比较流行的turtle(海龟库) 画一棵漂亮的樱花树,效果如下: ps: 是动态 ...
- 太酷炫了,我用python画出了北上广深的地铁路线动态图
今天教大家用python制作北上广深--地铁线路动态图,这可能是全网最全最详细的教程了. 坐标点的采集 小五之前做过类似的地理可视化,不过都是使用网络上收集到的json数据.但很多数据其实是过时的,甚 ...
- python画动态爱心代码_教你用python画动态爱心表白
原标题:教你用python画动态爱心表白 初级画心 学Python,感觉你们的都好复杂,那我来个简单的,我是直接把心形看作是一个正方形+两个半圆: 于是这就很简单了,十行代码解决: import tu ...
- python圣诞树代码成品图片动态_节日快乐! Python画一棵圣诞树送给你
本文实例为大家分享了Python画圣诞树的具体代码,供大家参考,具体内容如下 源代码 from turtle import * import random import time #from unit ...
- python画动态小黄鸭_20行代码制作字符画版小黄鸭表情包
前段时间,一只可爱的小黄鸭火起来了,据说是抖音上一位黄衣小姐姐模仿小黄鸭的动作而走红.这只动作呆萌的小黄鸭表情包也跟着火起来了,小黄鸭表情包也由一只变成多只,颜色也变幻莫测.pk 哥的技术交流群前段时 ...
- 太酷炫了,我用 Python 画出了北上广深的地铁路线动态图
今天教大家用python制作北上广深--地铁线路动态图,这可能是全网最全最详细的教程了. 坐标点的采集 小五之前做过类似的地理可视化,不过都是使用网络上收集到的json数据.但很多数据其实是过时的,甚 ...
- 美国网红python图片_美国失业人数突破2200万!这个动态图我用Python画出来了!...
目前,我国新冠疫情已经大幅度好转,各省市在3到4月份已经开始复产复工,连受灾最严重的武汉也解封了,全国的情况逐渐步入正轨. 但同时全球疫情十分严峻, 根据美国约翰斯.霍普金斯大学统计的数据显示,截至 ...
最新文章
- 电大计算机dm编写程序,中央电大计算机组成原理与汇编语言试题.docx
- 惠普大佬:未来30年四大趋势将推动科技产业发展
- ES6学习笔记(二十二)ArrayBuffer
- Linux下的parted工具的使用 GPT分区安装系统
- 【WebRTC---入门篇】(二十)WebRTC核心之SDP详解
- 【保存】java学习全套视频下载地址
- 最小的linux服务器_学习以最小的努力构建GraphQL服务器
- java 注解的使用
- python字符串_python的字符串怎么拼接
- 北京最最最牛逼的 IT 公司全在这了!
- Python基础算法篇-二叉树(前中后序遍历)
- 易语言如何注入 c dll,易语言注入dll调用函数的方法
- 后羿 11 ‖ 洛神
- Scene Graph(视觉关系场景图检测)
- 计算机三种不同类型的用户账户,网络操作系统——Windows Server 2008篇 教学课件 1 作者 刘本军 李建利 [项目5]用户与组的管理.ppt...
- Temple Run的终点
- [论文阅读笔记17]A Survey on Knowledge Graph-Based Recommender Systems
- 这意味着您在wp-config.php文件中指定的用户名和密码信息不正确
- DH410无人机搭配Pix飞控装机初体验
- 正益工场,构建社区型移动众包平台
热门文章
- Learning Generalized Spoof Cues for Face Anti-spoofing
- python三个数输出最小值_从键盘输入三个数,输出其中的最大值和最小值。_学小易找答案...
- 唯品会校招编程题详解
- 三星在世界移动大会上宣布Galaxy S5智能手机
- gitlable修改提交时的用户名称
- R语言之时间序列图绘制
- ChatGPT 又开始大规模封号了...
- 如何设计一个优雅健壮的Android WebView?(下
- 卓训教育:家长要把孩子的坏情绪变成正面动力
- 最新: 攻克苹果4.3被拒问题