使用canvas实现黑客帝国数字雨效果

框架(架构)  /  管理员 发布于 6年前   211

使用canvas实现黑客帝国数字雨

效果图：

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>      body {        margin: 0;        padding: 0;      }      canvas {        width: 100%;        height: 100%;      }    </style>  </head>  <body>    <canvas style="background:#111"></canvas>    <script>      //获取画布对象      var can = document.querySelector("canvas");      //获取画布的上下文      var ctx = can.getContext("2d");      //设置canvas的宽度和高度      can.width = window.innerWidth;      can.height = window.innerHeight;      //每个文字的字体大小      var fontSize = 16;      //计算列      var colunms = Math.floor(window.innerWidth / fontSize);      //记录每列文字的y轴坐标      var arr = [];      //给每一个文字初始化一个起始点的位置      for (var i = 0; i < colunms; i++) {        arr.push(0);      }      //运动的文字      var str = "you are a silly";      //绘画的函数      function draw() {        //布满全屏的黑色遮罩层        ctx.fillStyle = "rgba(0,0,0,0.05)";        ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);        //给字体设置样式        ctx.font = "700 " + fontSize + "px  微软雅黑";        //给字体添加颜色        ctx.fillStyle = "#00cc33";        //写入画布中        for (var i = 0; i < colunms; i++) {          var index = Math.floor(Math.random() * str.length);          var x = i * fontSize;          var y = arr[i] * fontSize;          ctx.fillText(str[index], x, y);          //如果文字的Y轴坐标大于画布的高度，1/100*colunms概率将该文字的Y轴坐标重置为0          if (y >= can.height && Math.random() > 0.99) {arr[i] = 0;          }    //文字Y轴坐标+1          arr[i]++;        }      }      draw();      setInterval(draw, 30);    </script>  </body></html>

总结

以上所述是小编给大家介绍的使用canvas实现黑客帝国数字雨效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！


  • 上一条：
    dede织梦自定义表单提交成功后跳转页面实现方法
    下一条：
    用Mac在CoreOS上搭建WordPress的教程

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客