HTML5 canvas如何实现代码流瀑布？（附代码）

在js部分写canvas代码，有详细注释

htML部分：

一个canvas元素：

canvas id="canvas" >
    /canvas>
    

css部分：

style>
  *{
       padding: 0;
       margin: 0;
  }
  canvas{
       background-color: #111;
  }
  body{
       overflow: hidden;
    }
    /style>
    

js部分

script>
      VAR canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      // 获取浏览器的宽度和高度  var w = window.innerWidth;
      var h = window.innerHeight;
      // 设置canvas的宽高  canvas.width = w;
      canvas.height = h;
      // 每个文字的大小  var fontSize = 16;
      // 一共可以有多少列文字  var col = Math.floor(w / fontSize);
      // 记录每列文字的y轴坐标  var cpy = [];
      for(var i = 0;
    i col;
 i++)  {
       cpy[i] = 1;
  }
  //定义文字  var str = "Javascriphafhsdhfsfsf{
}
    ";
      // 绘制  draw();
      setInterval(draw,30);
  function draw(){
       context.beginPath();
       // 背景填充颜色   context.fillStyle = "rgba(0,0,0,0.05)";
       context.fillRect(0,0,w,h);
       // 设置字体大小   context.font = fontSize +"px bold @R_512_1651@ ";
       // 设置字体颜色   context.fillStyle = "#00cc33";
       for(var i = 0;
     i  col;
i++)   {
        var index = Math.floor(Math.random()*str.length);
        var x = i*fontSize;
        var y = cpy[i]*fontSize;
        context.fillText(str.charAt(index),x,y);
        if(y >
    = h &
    &
     Math.random()>
 0.99)// 出现时间延迟的效果    {
         cpy[i]=0;
    // 只要Math.random>
 0.99 时才纵坐标从0开始写字    }
        cpy[i]++;
// 数组值加一，以便下一次写的字在下面一行   }
  }
    /script>
    

动态效果图：

更多炫酷特效，推荐访问：js特效大全！

以上就是HTML5 canvas如何实现代码流瀑布？（附代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！