canvas绘制竖排的数字_canvas+js实现数字雨特效

0.效果预览

数字雨.gif

1.完整代码及思路

数字雨

body{

margin: 0;

padding: 0;

background-color: black;

overflow: hidden;

}

window.οnlοad=function(){

var drCav = document.getElementById("digitalRain");

/*将画布大小设置为窗口文档显示区大小*/

var width = window.innerWidth;

var height = window.innerHeight;

drCav.width = width;

drCav.height = height;

var fontsize = 16; //数字字体大小

var columns = Math.ceil(width / fontsize); //列数(向上取整)

var dropLine = [];

for (var i = 0; i < columns; i++) {

dropLine[i] = 0;

}

/*Run*/

if(drCav.getContext){

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

timer = setInterval(draw, 30);

}

fu