云墨赠送一组黑客帝国代码雨字飘落JS特效代码

云墨
云墨
云墨
641
文章
11
评论
2018年8月27日 评论 748

云墨赠送一组黑客帝国代码雨字飘落JS特效代码

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

云墨赠送一组黑客帝国代码雨字飘落JS特效代码

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

如果你不想复制,可以直接下载我的使用:

链接:https://pan.baidu.com/s/1jmQFEtieqYd1KOQoiglFJQ 密码:ua55

下载信息 云墨赠送一组黑客帝国代码雨字飘落JS特效代码 很小
下载地址
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群:431710796
  • weinxin
云墨
  • 本文由 发表于 2018年8月27日
  • 转载请务必保留本文链接:https://www.yunmoseo.com/1309.html
言若非拼多多赚钱全攻略 云墨资源

言若非拼多多赚钱全攻略

带你从零入局拼多多,涵盖拼多多主流的玩法攻略,一步一步带你搭建可以出单的店铺, 并且教给你拼多多独家的推广/优化/寻找蓝海类目的方法,让你的新店迅速盈利,钞票不断来。 链接: https://pan....
匿名

发表评论

匿名网友