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
| <canvas id="canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;background:#000;" width="1920" height="1080"></canvas>
<script>
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var can = document.getElementById('canvas');
var cxt = can.getContext('2d');
can.width = window.screen.width;
can.height = window.screen.height;
var size = 15;
var cols = can.width / size;
var y = [];
for (var i = 0; i < cols; i++)y[i] = 0;
(function draw() {
cxt.fillStyle = 'rgba(0,0,0,.1)';
cxt.fillRect(0, 0, can.width, can.height);
cxt.fillStyle = '#27ff00';
cxt.font = 'bold ' + size + 'px Microsoft yahei';
for (var i = 0; i < cols; i++)
{
var s = Math.floor(Math.random() * 10) + '';
var textX = i * size;
var textY = y[i];
cxt.fillText(s, textX, textY);
y[i] += size;
if (y[i] >= can.height && Math.random() >= 0.9) {
y[i] = 0;
};
}
requestAnimFrame(draw);
})()
</script>
|