canvas+js实现数字雨特效

0.效果预览

数字雨.gif

1.完整代码及思路

2.部分函数和细节讲解

①Math.round()，Math.ceil()，Math.floor()

上面三个函数参数均可以为一个数字，不同之处在于：

Math.round():四舍五入
Math.ceil():向上取整
Math.floor():向下取整

②Math.random()

返回一个在[0,1)范围的随机数

var columns = Math.ceil(width / fontsize); //列数（向上取整）
定义列数时选择使用Math.ceil()，让宽度尽量填充。（右侧空一小部分会很难看...）
var figure = Math.floor(Math.random()*10); //生成0~9的伪随机数
这里使用Math.ceil()向下取整，避免生成10。(一个两位的数字在数字雨里会很突出...)

③绘制数字部分

用dropLine这个列表来记录绘制过程，dropLine[i]的意义是表示在第i列，第dropLine[i]行绘制！

ctx.fillText(figure, i * fontsize, dropLine[i] * fontsize);

filltext()是canvas中的方法，这里的三个参数分别对应：内容，横坐标，纵坐标。
坐标是相对于画布的，此处相当于将数字figure绘制到坐标（i * fontsize, dropLine[i] * fontsize）

if (dropLine[i] * fontsize > height || Math.random() > 0.95){
 dropLine[i] = 0;
}
 dropLine[i]++;

当纵坐标超出高度，回至第一行，并设置Math.random()>0.95让其有概率自己回到第一行，这样的数字雨才有感觉~