JavaScript + Canvas 实现数字雨效果。
源码：
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
| <div id="display_background" style="display: block; z-index: 1001;">
<canvas id="my_canvas" style="height: 400px; width: 600px;" ></canvas>
</div>
<script type="text/javascript">
var c = document.getElementById("my_canvas");
var ctx = c.getContext("2d");
c.height = window.innerHeight;
c.width = window.innerWidth;
var txts = "01";
txts = txts.split("");
var font_size = 16;
var columns = c.width/font_size;
var drops = [];
for(var x = 0; x < columns; x++) {
drops[x] = 1;
}
function draw()
{
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0";
ctx.font = font_size + "px arial";
for(var i = 0; i < drops.length; i++)
{
var text = txts[Math.floor(Math.random()*txts.length)];
ctx.fillText(text, i*font_size, drops[i]*font_size);
if(drops[i]*font_size > c.height || Math.random() > 0.95)
drops[i] = 0;
drops[i]++;
}
}
setInterval(draw, 33);
</script>
|