• 主页
  • 个人简介
    • 圣墨 photo

      圣墨

      一个爱折腾,有诗有远方的人

    • Learn More
    • Github
    • Cnblogs
    • Weibo
  • 文章
    • 所有文章
    • 所有标签
  • Html&Css
  • Javascript
  • 设计模式
  • 前端性能优化
  • 原生实现专题
  • 数据结构与算法
  • Book
  • 面试题
  • 前端工具
  • 随记

炫酷的黑客帝国

12 Dec 2017

Reading time ~1 minute

黑客帝国

关键点:

  • canvas

html

  <canvas id="canvas">请使用高版本浏览器,IE8以及一下不支持canvas</canvas>

css

   html,body{height:100%;overflow:hidden}

js

  window.onload = function() {
      var width,height,
      canvas = document.getElementById("canvas");
      canvas.width = width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      canvas.height = height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var ctx = canvas.getContext('2d');
      var num = Math.ceil(width / 10);
      var y = Array(num).join(0).split('');
      var draw = function() {
            ctx.fillStyle = 'rgba(0,0,0,.05)'; //核心代码,创建黑色背景,透明度为0.05的填充色。
            ctx.fillRect(0, 0, width, height);
            ctx.fillStyle = '#0f0'; //设置了字体颜色为绿色
            ctx.font = '10px Microsoft YaHei';//设置字体大小与family
            for(i = 0; i < num; i++) {
                var x = (i * 10) + 10;
                text = String.fromCharCode(65 + Math.random() * 62);
                var y1 = y[i];
                ctx.fillText(text, x, y1);
                if(y1 > Math.random() * 10 * height) {
                    y[i] = 0;
                } else {
                    y[i] = parseInt(y[i]) + 10;
                }
            }
        }
    
        ;(function(){
            setInterval(draw, 100);
        })();
      }


markdown javascript canvas  微博  QQ  朋友圈