数字下落

  1. window.onload = function() {
  2.     var c = document.getElementById("c");
  3.     var ctx = c.getContext("2d");
  5.     //使画布全屏
  6.     c.height = window.innerHeight;
  7.     c.width = window.innerWidth;
  9.     //要掉落的文字
  10.     var txts = "0123456789";
  11.     //转换为数组
  12.     txts = txts.split("");
  14.     var font_size = 16;
  15.     var columns = c.width / font_size;
  16.     //计算纵队数
  18.     var drops = [];
  19.     //初始值
  20.     for (var x = 0; x < columns; x++)
  21.         drops[x] = 1;
  23.     //窗体大小发生改变
  24.     window.onresize = function() {
  25.         //使绘图区域全屏
  26.         c.height = window.innerHeight;
  27.         c.width = window.innerWidth;
  28.         columns = c.width / font_size;
  29.         //计算纵队数
  30.         for (var x = 0; x < columns; x++)
  31.             drops[x] = 1;
  32.     }
  34.     //进入全屏
  35.     function requestFullScreen() {
  36.         var de = document.documentElement;
  37.         if (de.requestFullscreen) {
  38.             de.requestFullscreen();
  39.         } else if (de.mozRequestFullScreen) {
  40.             de.mozRequestFullScreen();
  41.         } else if (de.webkitRequestFullScreen) {
  42.             de.webkitRequestFullScreen();
  43.         }
  44.     }
  46.     //添加点击监听事件（点击全屏）
  47.     document.body.addEventListener('click', function() {
  48.         requestFullScreen();
  49.         //调用全屏
  50.         eleImage.requestPointerLock();
  51.         // 锁定鼠标
  52.     }, false);
  54.     //绘制下落的文字
  55.     function draw() {
  56.         //让背景逐渐由透明到不透明
  57.         ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  58.         ctx.fillRect(0, 0, c.width, c.height);
  60.         ctx.fillStyle = "#0F0";
  61.         //文本颜色（绿色）
  62.         ctx.font = font_size + "px arial";
  63.         //逐行输出文字
  64.         for (var i = 0; i < drops.length; i++) {
  65.             //随机取要输出的文字
  66.             var text = txts[Math.floor(Math.random() * txts.length)];
  67.             //输出文字，注意坐标的计算
  68.             ctx.fillText(text, i * font_size, drops[i] * font_size);
  70.             //如果绘满一屏或随机数大于0.95（此数可自行调整，效果会不同）
  71.             if (drops[i] * font_size > c.height || Math.random() > 0.95)
  72.                 drops[i] = 0;
  74.             //用于Y轴坐标增加
  75.             drops[i]++;
  76.         }
  77.     }
  79.     setInterval(draw, 33);
  80.     //定时执行
  81. }