黑客帝国代码雨字飘落JS特效

2017年10月24日22:34:59 1 1,714

一段js你可以放入网站也可以单独建立一个html文件来放代码,使用复制下面代码到你要放的地方,代码里备注了要修改的,如果你要限制宽长写个css来解决。
黑客帝国代码雨字飘落JS特效


<canvas id="mom" style="background:#111"></canvas>
  1.   <script type="text/javascript">
  2.     window.onload = function(){
  3. //获取画布对象
  4.         var canvas = document.getElementById("mom");
  5. //获取画布的上下文
  6.         var context =canvas.getContext("2d");
  7. //获取浏览器屏幕的宽度和高度
  8.         var W = window.innerWidth;
  9.         var H = window.innerHeight;
  10. //设置canvas的宽度和高度
  11.         canvas.width = W;
  12.         canvas.height = H;
  13. //每个文字的字体大小
  14.         var fontSize = 16;
  15. //计算列
  16.         var colunms = Math.floor(W /fontSize);
  17. //记录每列文字的y轴坐标
  18.         var drops = [];
  19. //给每一个文字初始化一个起始点的位置
  20. for(var i=0;i<colunms;i++){
  21.             drops.push(0);
  22.         }
  23. //运动的文字
  24.         var str ="诗梦 诗梦 博客";
  25. //4:fillText(str,x,y);原理就是去更改y的坐标位置
  26. //绘画的函数
  27.         function draw(){
  28.             context.fillStyle = "rgba(0,0,0,0.05)";
  29.             context.fillRect(0,0,W,H);
  30. //给字体设置样式
  31.             context.font = "700 "+fontSize+"px  微软雅黑";
  32. //给字体添加颜色
  33.             context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色,十六进制颜色
  34. //写入画布中
  35. for(var i=0;i<colunms;i++){
  36.                 var index = Math.floor(Math.random() * str.length);
  37.                 var x = i*fontSize;
  38.                 var y = drops[i] *fontSize;
  39.                 context.fillText(str[index],x,y);
  40. //如果要改变时间,肯定就是改变每次他的起点
  41. if(y >= canvas.height && Math.random() > 0.99){
  42.                     drops[i] = 0;
  43.                 }
  44.                 drops[i]++;
  45.             }
  46.         };
  47.         function randColor(){
  48.             var r = Math.floor(Math.random() * 256);
  49.             var g = Math.floor(Math.random() * 256);
  50.             var b = Math.floor(Math.random() * 256);
  51. return "rgb("+r+","+g+","+b+")";
  52.         }
  53.         draw();
  54.         setInterval(draw,30);
  55.     };
  56. </script>

效果图:

黑客帝国代码雨字飘落JS特效

诗梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 爱都娱乐 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省湖州市 联通 3

      看完长站的这篇文章后,我的心久久不能平静,震撼啊!为什么会有如此好的文章。