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

本篇 文章 给大家分享 HTML5 canvas 代码流瀑布的具体代码。 有一定的参考价值 ， 有需要的朋友可以参考一下 ， 希望对大家有所帮助 。

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

ht ML 部分：

一个canvas元素：

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

css部分：

<style>
  *{
   padding: 0;
   m arg in: 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.innerH ei ght;
  // 设置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.be gin Path();
   // 背景填充颜色
   context.fillStyle = "rgba(0,0,0,0.05)";
   context.fillRect(0,0,w,h);
   // 设置字体大小
   context.font = fontSize +"px bold  微软雅黑  ";
   // 设置 字体颜色 
   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如何实现代码流瀑布？（附代码）的详细内容，更多请关注其它相关文章！

总结

以上是 为你收集整理的 HTML5 canvas如何实现代码流瀑布？（附代码） 全部内容，希望文章能够帮你解决 HTML5 canvas如何实现代码流瀑布？（附代码） 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于HTML5 canvas如何实现代码流瀑布？（附代码）的详细内容...