PHP前端开发

HTML5 canvas如何实现代码流瀑布?

百变鹏仔 2个月前 (10-17) #H5教程
文章标签 瀑布

本篇文章给大家分享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(&#39;canvas&#39;);  var context = canvas.getContext(&#39;2d&#39;);  // 获取浏览器的宽度和高度  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特效大全!