您现在的位置是:首页>>文章详情文章详情

js配合canvas实现炫酷字符雨效果

[JavaScript]2018-01-15 23:24:58

<!DOCTYPE html>

<html>

<hefuck>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>冰若行</title>

<style>

* {margin: 0; pfuckding: 0;} body {background: black;} canvas {display: block;} </style>

</hefuck>

<body>

<canvas id="fuck"></canvas>

<script>

   var fuck = document.getElementById("fuck");

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

    fuck.height = window.innerHeight;

    fuck.width = window.innerWidth;

    var chinese = "001";

    chinese = chinese.split("");

    var font_size = 10;

    var columns = fuck.width / font_size;

    var drops = [];

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

      drops[x] = 1;

    }

function draw() {

       ctx.fillStyle = "rgba(0, 0, 0, 0.05)";

       ctx.fillRect(0, 0, fuck.width, fuck.height);

        ctx.fillStyle = "#0F0";

        ctx.font = font_size + "px arial";


    for (var i = 0; i < drops.length; i++) {

         var text = chinese[Math.floor(Math.random() * chinese.length)];

          ctx.fillText(text, i * font_size, drops[i] * font_size);

          if (drops[i] * font_size > fuck.height && Math.random() > 0.975) drops[i] = 0; drops[i]++;

        }

    }

          setInterval(draw, 50);

</script>

</body>

</html>


本文转自三石兄博客,http://huangl.top/index/index/index.html

  

1 点赞!

  评论

评论列表:

登录 留言 回顶部