看下效果吧。从上往下，文字坠落伴随颜色的变化。
image.png
image.png
看下代码：
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
#container{
width: 100%;
height: 100%;
}
</style>
<body>
<canvas id="container"></canvas>
</body>
<script>
var canvas = document.getElementById("container");
canvas.width = window.innerWidth;
canvas.height =window.innerHeight;
var ctx = canvas.getContext("2d");
var mystyle = "高高是个聪明美丽风度翩翩倾国倾城国色天香
机智勇敢肤白貌美的大长腿无与伦比的小阔爱";
mystyle = mystyle.split("");//分割成数组
var font_size = 15;
var cul = Math.floor(canvas.width/font_size);//计算每行多少列
console.log(cul);
var drops = [];
for(var i =0;i<cul;i++)
drops[i] = 1;
console.log(drops);
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.03)"; //填充色
ctx.fillRect(0, 0, canvas.width, canvas.height); //绘制
for(var i = 0;i<drops.length;i++){
var text = mystyle[Math.floor(Math.random()*mystyle.length)];
//数组中随机开始的字
var gradient =ctx.createLinearGradient(0,0,0,canvas.height);
//渐变色,从0到屏幕长度
gradient.addColorStop("0","green");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1","magenta");
ctx.fillStyle = gradient;//填充颜色为渐变色
ctx.font = font_size+'px arial';
//填充文本，开始绘制x坐标(宽度)，y坐标(长度)
ctx.fillText(text, i*font_size ,drops[i]*font_size );
if (drops[i]* font_size > canvas.height && Math.random() > 0.975)//停止条件
drops[i]= 0; //长度为0
drops[i]++; //长度变长
}
}
setInterval(draw,50);
</script>
