铁东博客

HTML5利用canvas实现代码流瀑布

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

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

html部分:

css部分:

 *{

   padding: 0;

   margin: 0;

  }

  canvas{

   background-color: #111;

  }

  body{

   overflow: hidden;

   

  }
js部分



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]++;// 数组值加一,以便下一次写的字在下面一行

   }

  }

效果图:

未经允许不得转载:铁东博客 » HTML5利用canvas实现代码流瀑布

评论,共有 0 条评论

  • 昵称 (必填)
  • 邮箱 (必填)
暂无评论数据,赶紧来评论吧