广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

本篇文章给大家分享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 微软雅黑 ";   // 设置字体颜色   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如何实现代码流瀑布？（附代码）的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~