| <!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('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; |
| } |
| |
| 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)); |
| |
| } |
| 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(); |
| } |
| |
| |
| function degToRad(deg) { |
| return deg * (Math.PI / 180); |
| } |
| </script> |
| |
| </body> |
| </html> |
| |
