demo/Snow.html at main · arcesoftware/demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);

var snowflakes = [];
for (var i = 0; i < 100; i++) {
  snowflakes.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    r: Math.random() * 2 + 1,
    d: Math.random() * 10 + 5
  });
}

function draw() {
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'white';
  for (var i = 0; i < snowflakes.length; i++) {
    var snowflake = snowflakes[i];
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, true);
    ctx.fill();
    snowflake.y += snowflake.d;
    if (snowflake.y > canvas.height) {
      snowflake.y = -snowflake.r;
      snowflake.x = Math.random() * canvas.width;
    }
  }
  window.requestAnimationFrame(draw);
}
draw();
});
        </script>
    </head>
    <body style="margin: 0;">
        <div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
    </body>
</html>