可以用电脑自带的文本文档打，很简单的。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            html,body{width: 100%;height: 100%;}

            body{

                background: #000;

                overflow: hidden;

                margin: 0;

                padding: 0;

            }

        </style>

    </head>

    <body>

        <canvas id="cvs"></canvas>

        <script type="text/javascript">

            var cvs = document.getElementById("cvs");

            var ctx = cvs.getContext("2d");

            var cw = cvs.width = document.body.clientWidth;

            var ch = cvs.height = document.body.clientHeight;

            //动画绘制对象

            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

            var codeRainArr = [];

            var cols = parseInt(cw/14); //代码雨列数

            var step = 16 ;    //步长，每一列内部数字之间的上下间隔

            ctx.font = "bold 26px microsoft yahei"

 

function createColorCv() {

//画布基本颜色

ctx.fillStyle="#242424";

ctx.fillRect(0,0,cw,ch);

}

 

            //创建代码雨

            function createCodeRain() {

                for (var n = 0; n < cols; n++) {

                    var col = [];

                    //基础位置，为了列与列之间产生错位

                    var basePos = parseInt(Math.random()*300);

                    //随机速度 3~13之间

                    var speed = parseInt(Math.random()*10)+3;

                    //每组的x轴位置随机产生

                    var colx = parseInt(Math.random()*cw)

 

   //绿色随机

var rgbr= 0;

var rgbg= parseInt(Math.random()*255);

var rgbb= 0;

//ctx.fillStyle = "rgb("+r+','+g+','+b+")"

 

                    for (var i = 0; i < parseInt(ch/step)/2; i++) {

                        var code = {

                            x : colx,

                            y : -(step*i)-basePos,

                            speed : speed,

//                            text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1

                            text : ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","s","t","u","v","w","x","y","z"][parseInt(Math.random()*11)], //随机生成字母数组中的一个

color : "rgb("+rgbr+','+rgbg+','+rgbb+")"

                        }

                        col.push(code);  

                    }

                    codeRainArr.push(col);

                }

            }

            //代码雨下起来

            function codeRaining(){

                //把画布擦干净

                ctx.clearRect(0,0,cw,ch);

//创建有颜色的画布

//createColorCv();

                for (var n = 0; n < codeRainArr.length; n++) {

                    //取出列

                    col = codeRainArr[n];

                    //遍历列，画出该列的代码

                    for (var i = 0; i < col.length; i++) {

                        var code = col[i];

                        if(code.y > ch){

                            //如果超出下边界则重置到顶部

                            code.y = 0;

                        }else{

                            //匀速降落

                            code.y += code.speed;

                        }

                        //颜色也随机变化

 

                        //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";

 

//绿色逐渐变浅

 

//ctx.fillStyle = "hsl(123,30%,"+(30-i*2)+"%)";

 

//绿色随机

//var r= 0;

//var g= parseInt(Math.random()*255) + 3;

//var b= 0;

//ctx.fillStyle = "rgb("+r+','+g+','+b+")"

ctx.fillStyle = code.color;

                        //把代码画出来

                        ctx.fillText(code.text,code.x,code.y);

                    }

                }

                requestAnimationFrame(codeRaining);

            }

 

            //创建代码雨

            createCodeRain();

            //开始下雨吧 GO>>

            requestAnimationFrame(codeRaining);

        </script>

    </body>

</html>

 

 

图片展示：

更多推荐

代码雨教程