| <html> |
| <body> |
| <style> |
| canvas { |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| <script> |
| "use strict"; |
| |
| let context = document.body.appendChild(document.createElement("canvas")).getContext("2d"); |
| let canvasWidth = 0; |
| let canvasHeight = 0; |
| |
| function handleResize() { |
| canvasWidth = context.canvas.width = context.canvas.offsetWidth; |
| canvasHeight = context.canvas.height = context.canvas.offsetHeight; |
| } |
| handleResize(); |
| window.addEventListener("resize", handleResize); |
| |
| class Star { |
| constructor() |
| { |
| this._initialize(); |
| } |
| |
| draw() |
| { |
| // if (this._x > -this._s && this._x < canvasWidth + this._s && this._y > -this._s && this._y < canvasHeight + this._s) { |
| context.moveTo(this._x, this._y); |
| context.arc(this._x, this._y, this._s, 0, 2 * Math.PI); |
| // } |
| |
| this._x += this._vx; |
| this._y += this._vy; |
| if (this._x > canvasWidth + this._s || this._y < -this._s) |
| this._initialize(); |
| } |
| |
| _initialize() |
| { |
| this._s = this._randomFromInterval(0.5, 3); |
| |
| this._x = this._randomFromInterval(-canvasWidth, 0); |
| this._y = this._randomFromInterval(canvasHeight, canvasHeight * 2); |
| |
| this._vx = this._randomFromInterval(0.5, 3); |
| this._vy = this._randomFromInterval(-0.5, -3); |
| } |
| |
| _randomFromInterval(min, max) |
| { |
| return Math.random() * (max - min + 1) + min; |
| } |
| } |
| |
| let stars = []; |
| for (let i = 0; i < 10000; ++i) |
| stars.push(new Star); |
| |
| window.requestAnimationFrame(function frame(timestamp) { |
| context.fillStyle = "hsla(0, 0%, 10%, 0.5)"; |
| context.fillRect(0, 0, canvasWidth, canvasHeight); |
| |
| for (let i = 0; i < 10; ++i) { |
| context.beginPath(); |
| |
| for (let j = 0; j < stars.length / 10; ++j) |
| stars[(i * stars.length / 10) + j].draw(); |
| |
| context.fillStyle = "white"; |
| context.fill(); |
| } |
| |
| window.requestAnimationFrame(frame); |
| }); |
| |
| </script> |
