当前位置:  首页  >  前端开发  >  Html5

HTML5canvas如何实现代码流瀑布?(附代码)-

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

html部分:

一个canvas元素:

css部分:

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如何实现代码流瀑布?(附代码)的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有