黑客帝国酷炫特效

作者: 丶Arrow | 来源:发表于2017-05-25 23:00 被阅读0次

代码如下快去使用吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="q"></canvas>
    <script type="text/javascript" >
        var s = window.screen;
        var width = q.width = s.width;
        var height = q.height = s.height;
        var letters = Array(256).join(1).split('');
        var draw = function () {
          q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
          q.getContext('2d').fillRect(0,0,width,height);
          q.getContext('2d').fillStyle='#0F0';
          letters.map(function(y_pos, index){
            text = String.fromCharCode(3e4+Math.random()*33);
            x_pos = index * 10;
            q.getContext('2d').fillText(text, x_pos, y_pos);
            letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
          });
        };
        setInterval(draw, 33);
</script>
</body>
</html>