<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>互动星空</title>
<style>
html,body {
margin:0;
overflow:hidden;
width:100%;
height:100%;
cursor:none;
background:black;
background:linear-gradient(to bottom,#000000 0%,#5788fe 100%);
}
.filter {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:#fe5757;
animation:colorChange 30s ease-in-out infinite;
animation-fill-mode:both;
mix-blend-mode:overlay;
}
@keyframes colorChange {
0%,100% {
opacity:0;
}
50% {
opacity:.9;
}
}.landscape {
position:absolute;
bottom:0px;
left:0;
width:100%;
height:100%;
/*background-image:url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);
*/
background-image:url('http://www.jq22.com/css/img/xkbg.png');
background-size:1000px 250px;
background-repeat:repeat-x;
background-position:center bottom;
}
</style>
</head>
<body>
<div class="landscape"></div>
<div class="filter"></div>
<canvas id="canvas"></canvas>
<script>
function Star(id, x, y){
this.id = id;
this.x = x;
this.y = y;
this.r = Math.floor(Math.random()*2)+1;
var alpha = (Math.floor(Math.random()*10)+1)/10/2;
this.color = "rgba(255,255,255,"+alpha+")";
}
Star.prototype.draw = function() {
ctx.fillStyle = this.color;
ctx.shadowBlur = this.r * 2;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
}
Star.prototype.move = function() {
this.y -= .15;
if (this.y <= -10) this.y = HEIGHT + 10;
this.draw();
}
Star.prototype.die = function() {
stars[this.id] = null;
delete stars[this.id];
}
function Dot(id, x, y, r) {
this.id = id;
this.x = x;
this.y = y;
this.r = Math.floor(Math.random()*5)+1;
this.maxLinks = 2;
this.speed = .5;
this.a = .5;
this.aReduction = .005;
this.color = "rgba(255,255,255,"+this.a+")";
this.linkColor = "rgba(255,255,255,"+this.a/4+")";
this.dir = Math.floor(Math.random()*140)+200;
}
Dot.prototype.draw = function() {
ctx.fillStyle = this.color;
ctx.shadowBlur = this.r * 2;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
}
Dot.prototype.link = function() {
if (this.id == 0) return;
var previousDot1 = getPreviousDot(this.id, 1);
var previousDot2 = getPreviousDot(this.id, 2);
var previousDot3 = getPreviousDot(this.id, 3);
if (!previousDot1) return;
ctx.strokeStyle = this.linkColor;
ctx.moveTo(previousDot1.x, previousDot1.y);
ctx.beginPath();
ctx.lineTo(this.x, this.y);
if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);
if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);
ctx.stroke();
ctx.closePath();
}
function getPreviousDot(id, stepback) {
if (id == 0 || id - stepback < 0) return false;
if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];
else return false;//getPreviousDot(id - stepback);
}
Dot.prototype.move = function() {
this.a -= this.aReduction;
if (this.a <= 0) {
this.die();
return
}
this.color = "rgba(255,255,255,"+this.a+")";
this.linkColor = "rgba(255,255,255,"+this.a/4+")";
this.x = this.x + Math.cos(degToRad(this.dir))*this.speed,
this.y = this.y + Math.sin(degToRad(this.dir))*this.speed;
this.draw();
this.link();
}
Dot.prototype.die = function() {
dots[this.id] = null;
delete dots[this.id];
}
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
WIDTH,
HEIGHT,
mouseMoving = false,
mouseMoveChecker,
mouseX,
mouseY,
stars = [],
initStarsPopulation = 80,
dots = [],
dotsMinDist = 2,
maxDistFromCursor = 50;
setCanvasSize();
init();
function setCanvasSize() {
WIDTH = document.documentElement.clientWidth,
HEIGHT = document.documentElement.clientHeight;
canvas.setAttribute("width", WIDTH);
canvas.setAttribute("height", HEIGHT);
}
function init() {
ctx.strokeStyle = "white";
ctx.shadowColor = "white";
for (var i = 0; i < initStarsPopulation; i++) {
stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT));
//stars[i].draw();
}
ctx.shadowBlur = 0;
animate();
}
function animate() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (var i in stars) {
stars[i].move();
}
for (var i in dots) {
dots[i].move();
}
drawIfMouseMoving();
requestAnimationFrame(animate);
}
window.onmousemove = function(e){
mouseMoving = true;
mouseX = e.clientX;
mouseY = e.clientY;
clearInterval(mouseMoveChecker);
mouseMoveChecker = setTimeout(function() {
mouseMoving = false;
}, 100);
}
function drawIfMouseMoving(){
if (!mouseMoving) return;
if (dots.length == 0) {
dots[0] = new Dot(0, mouseX, mouseY);
dots[0].draw();
return;
}
var previousDot = getPreviousDot(dots.length, 1);
var prevX = previousDot.x;
var prevY = previousDot.y;
var diffX = Math.abs(prevX - mouseX);
var diffY = Math.abs(prevY - mouseY);
if (diffX < dotsMinDist || diffY < dotsMinDist) return;
var xVariation = Math.random() > .5 ? -1 : 1;
xVariation = xVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
var yVariation = Math.random() > .5 ? -1 : 1;
yVariation = yVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation);
dots[dots.length-1].draw();
dots[dots.length-1].link();
}
//setInterval(drawIfMouseMoving, 17);
function degToRad(deg) {
return deg * (Math.PI / 180);
}
</script>
</body>
</html>
html--互动星空
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9598.html
相关文章
-
解决fixed定位z-index层级无效问题
-
Node.js毕业设计基于HTML5的互动游戏新闻网站的设计与实现(Express 附源码)
-
【前端问题集】安卓手机H5页面加粗失效
-
HTML5(二)——获取用户位置Geolocation,万字解析
-
html5怎么实现语音搜索
-
HTML5
-
HTML - 头部元素
-
由于一个完整的购物商城代码涉及多个方面(如前端、后端、数据库等),并且每种语言都有其特定的用途和优势,我将为你提供简化的示例代码,分别用前端(HTML/CSS/JavaScript)、后端(Pytho
-
web前端之引入外部svg文件、html引入.svg文件、等比缩放、解决裁剪、解决若依框架无法使用img选入svg文件问题、命名空间、阿里巴巴尺量图、object标签、embed标签、iframe标签
-
margin重叠问题及解决方案全览
发布的文章
解决fixed定位z-index层级无效问题
2024-06-01 10:06:45
Node.js毕业设计基于HTML5的互动游戏新闻网站的设计与实现(Express 附源码)
2024-06-01 10:06:33
【前端问题集】安卓手机H5页面加粗失效
2024-06-01 10:06:33
HTML5(二)——获取用户位置Geolocation,万字解析
2024-06-01 10:06:32
html5怎么实现语音搜索
2024-06-01 10:06:32
HTML5
2024-02-27 11:02:15
HTML - 头部元素
2024-06-01 10:06:06
由于一个完整的购物商城代码涉及多个方面(如前端、后端、数据库等),并且每种语言都有其特定的用途和优势,我将为你提供简化的示例代码,分别用前端(HTML/CSS/JavaScript)、后端(Pytho
2024-06-01 10:06:04
web前端之引入外部svg文件、html引入.svg文件、等比缩放、解决裁剪、解决若依框架无法使用img选入svg文件问题、命名空间、阿里巴巴尺量图、object标签、embed标签、iframe标签
2024-06-01 10:06:00
微信小程序实现带刻度简易仪表盘
2024-06-01 10:06:53
大家推荐的文章