HTML实现代码雨源码及效果示例

最近学习了HTML，今天写个HTML代码雨，然后下面用HTML和js也写了一个，给自己留点笔记

先看看效果

1、绿色：

2、彩色：

3、背景色：

4、绿色逐渐变浅：

源代码：

!DOCTYPE html>
    html>
       head>
           meta http-equiv="Content-type" content="text/html;
    charset=utf-8">
        tITle>
    Code -by ZhenYu.Sha/title>
        style type="text/css">
        html, body {
                width: 100%;
                height: 100%;
        }
        body {
                background: #000;
                overflow: hidden;
                margin: 0;
                padding: 0;
        }
        /style>
    /head>
       body>
      canvas id="CVS">
    /canvas>
    script type="text/javascript">
        VAR cvs = document.getElementById("cvs");
        var ctx = cvs.getContext("2d");
        var cw = cvs.width = document.body.clientWidth;
        var ch = cvs.height = document.body.clientHeight;
        //动画绘制对象    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        var codeRainArr = [];
     //代码雨数组    var cols = parseInt(cw / 14);
     //代码雨列数    var step = 16;
        //步长，每一列内部数字之间的上下间隔    ctx.font = "bold 26px microsoft yahei";
 //声明字体，个人喜欢微软雅黑     function createColorCv() {
            //画布基本颜色        ctx.fillStyle = "#242424";
            ctx.fillRect(0, 0, cw, ch);
    }
     //创建代码雨    function createCodeRain() {
            for (var n = 0;
     n  cols;
 n++) {
                var col = [];
                //基础位置，为了列与列之间产生错位            var basePos = parseInt(Math.random() * 300);
                //随机速度 3~13之间            var speed = parseInt(Math.random() * 10) + 3;
                //每组的x轴位置随机产生            var colx = parseInt(Math.random() * cw)             //绿色随机            var rgbr = 0;
                var rgbg = parseInt(Math.random() * 255);
                var rgbb = 0;
                //ctx.fillStyle = "rgb("+r+','+g+','+b+")"             for (var i = 0;
     i  parseInt(ch / step) / 2;
 i++) {
                var code = {
                    x: colx,                    y: -(step * i) - basePos,                    speed: speed,                    //  text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1                    text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个                    color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"                }
                    col.push(code);
            }
                codeRainArr.push(col);
        }
    }
     //代码雨下起来    function codeRaining() {
            //把画布擦干净        ctx.clearRect(0, 0, cw, ch);
            //创建有颜色的画布        //createColorCv();
            for (var n = 0;
     n  codeRainArr.length;
 n++) {
                //取出列            col = codeRainArr[n];
                //遍历列，画出该列的代码            for (var i = 0;
     i  col.length;
 i++) {
                    var code = col[i];
                    if (code.y >
 ch) {
                        //如果超出下边界则重置到顶部                    code.y = 0;
                }
 else {
                        //匀速降落                    code.y += code.speed;
                }
                                    //1 颜色也随机变化                //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";
                      //2 绿色逐渐变浅                // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)";
                      //3 绿色随机                // var r= 0;
                    // var g= parseInt(Math.random()*255) + 3;
                    // var b= 0;
                    // ctx.fillStyle = "rgb("+r+','+g+','+b+")";
                     //4 一致绿                ctx.fillStyle = code.color;
                      //把代码画出来                ctx.fillText(code.text, code.x, code.y);
            }
        }
            requestAnimationFrame(codeRaining);
    }
         //创建代码雨    createCodeRain();
        //开始下雨吧 GO>
    >
        requestAnimationFrame(codeRaining);
    /script>
       /body>
    /html>
    

更多代码雨的文章请参考我的其它文章：

“代码雨”js+css+html实现

HTML代码：

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    link rel="stylesheet" type="text/css" href="css/ok.css">
    title>
    code by-zhenyu.sha/title>
    /head>
     body>
    canvas id="canvas">
    /canvas>
    /body>
    script src="http://www.jq22.COM/jquery/jquery-1.10.2.js">
    /script>
    script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js">
    /script>
    script type="text/javascript" src="js/ok.js">
    /script>
    /html>
    

js代码：

(function() {
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for (var x = 0;
     x  vendors.length &
    &
     !window.requestAnimationFrame;
 ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }
  if (!window.requestAnimationFrame)    window.requestAnimationFrame = function(callback, element) {
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
              callback(currTime + timeToCall);
        }
    ,        timeToCall);
          lastTime = currTime + timeToCall;
          return id;
    }
    ;
  if (!window.cancelAnimationFrame)    window.cancelAnimationFrame = function(id) {
          clearTimeout(id);
    }
    ;
}
    ());
    // statsvar stats = new Stats();
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
var M = {
  settings: {
    COL_WIDTH: 20,    COL_HEIGHT: 25,    VELOCITY_PARAMS: {
      min: 4,      max: 8    }
,    CODE_LENGTH_PARAMS: {
      min: 20,      max: 40    }
  }
    ,  animation: null,  c: null,  ctx: null,  lineC: null,  ctx2: null,  WIDTH: window.innerWidth,  HEIGHT: window.innerHeight,  COLUMNS: null,  canvii: [],  font: '30px matrix-code',  letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&
    ', '_', '(', ')', ',', '.', ';
', ':', '?', '!', '\\', '|', '{
', '}
    ', '', '>
', '[', ']', '^', '~'],  codes: [],  createCodeLoop: null,  codesCounter: 0,  init: function() {
        M.c = document.getElementById('canvas');
        M.ctx = M.c.getContext('2d');
        M.c.width = M.WIDTH;
        M.c.height = M.HEIGHT;
        M.ctx.shadowBlur = 0;
        M.ctx.fillStyle = '#000';
        M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);
        M.ctx.font = M.font;
        M.COLUMNS = Math.ceil(M.WIDTH / M.settings.COL_WIDTH);
        for (var i = 0;
     i  M.COLUMNS;
 i++) {
          M.codes[i] = [];
      M.codes[i][0] = {
        'open': true,        'position': {
          'x': 0,          'y': 0        }
,        'strength': 0      }
    ;
    }
        M.loop();
        M.createLines();
        M.createCode();
        // not doing this, kills CPU    // M.swapCharacters();
    window.onresize = function() {
          window.cancelAnimationFrame(M.animation);
          M.animation = null;
          M.ctx.clearRect(0, 0, M.WIDTH, M.HEIGHT);
          M.codesCounter = 0;
          M.ctx2.clearRect(0, 0, M.WIDTH, M.HEIGHT);
          M.WIDTH = window.innerWidth;
          M.HEIGHT = window.innerHeight;
          M.init();
    }
    ;
  }
,  loop: function() {
    M.animation = requestAnimationFrame(function() {
          M.loop();
    }
    );
        M.draw();
        stats.update();
  }
,  draw: function() {
        var velocity, height, x, y, c, ctx;
        // slow fade BG colour    M.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
        M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);
        M.ctx.globalComposite@R_512_1162@tion = 'source-over';
        for (var i = 0;
     i  M.COLUMNS;
 i++) {
      // check member of array isn't undefined at this point      if (M.codes[i][0].canvas) {
            velocity = M.codes[i][0].velocity;
            height = M.codes[i][0].canvas.height;
            x = M.codes[i][0].position.x;
            y = M.codes[i][0].position.y - height;
            c = M.codes[i][0].canvas;
            ctx = c.getContext('2d');
            M.ctx.drawImage(c, x, y, M.settings.COL_WIDTH, height);
        if ((M.codes[i][0].position.y - height)  M.HEIGHT) {
              M.codes[i][0].position.y += velocity;
        }
 else {
              M.codes[i][0].position.y = 0;
        }
      }
    }
  }
,  createCode: function() {
        if (M.codesCounter >
 M.COLUMNS) {
          clearTimeout(M.createCodeLoop);
          return;
    }
        var randomInterval = M.randomFromInterval(0, 100);
        var column = M.assignColumn();
    if (column) {
          var codeLength = M.randomFromInterval(M.settings.CODE_LENGTH_PARAMS.min, M.settings.CODE_LENGTH_PARAMS.max);
          var codeVelocity = (Math.random() * (M.settings.VELOCITY_PARAMS.max - M.settings.VELOCITY_PARAMS.min)) + M.settings.VELOCITY_PARAMS.min;
          var lettersLength = M.letters.length;
      M.codes[column][0].position = {
        'x': (column * M.settings.COL_WIDTH),        'y': 0      }
    ;
          M.codes[column][0].velocity = codeVelocity;
          M.codes[column][0].strength = M.codes[column][0].velocity / M.settings.VELOCITY_PARAMS.max;
          for (var i = 1;
     i = codeLength;
 i++) {
            var newLetter = M.randomFromInterval(0, (lettersLength - 1));
            M.codes[column][i] = M.letters[newLetter];
      }
          M.createCanvii(column);
          M.codesCounter++;
    }
        M.createCodeLoop = setTimeout(M.createCode, randomInterval);
  }
,  createCanvii: function(i) {
        var codeLen = M.codes[i].length - 1;
        var canvHeight = codeLen * M.settings.COL_HEIGHT;
        var velocity = M.codes[i][0].velocity;
        var strength = M.codes[i][0].strength;
        var text, fadeStrength;
        var newCanv = document.createElement('canvas');
        var newCtx = newCanv.getContext('2d');
        newCanv.width = M.settings.COL_WIDTH;
        newCanv.height = canvHeight;
        for (var j = 1;
     j  codeLen;
 j++) {
          text = M.codes[i][j];
          newCtx.globalCompositeOperation = 'source-over';
          newCtx.font = '30px matrix-code';
      if (j  5) {
            newCtx.shadowColor = 'hsl(104, 79%, 74%)';
            newCtx.shadowOffsetX = 0;
            newCtx.shadowOffsetY = 0;
            newCtx.shadowBlur = 10;
            newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';
      }
     else if (j >
 (codeLen - 4)) {
            fadeStrength = j / codeLen;
            fadeStrength = 1 - fadeStrength;
            newCtx.shadowOffsetX = 0;
            newCtx.shadowOffsetY = 0;
            newCtx.shadowBlur = 0;
            newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')';
      }
 else {
            newCtx.shadowOffsetX = 0;
            newCtx.shadowOffsetY = 0;
            newCtx.shadowBlur = 0;
            newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')';
      }
          newCtx.fillText(text, 0, (canvHeight - (j * M.settings.COL_HEIGHT)));
    }
        M.codes[i][0].canvas = newCanv;
  }
,  swapCharacters: function() {
        var randomCodeIndex;
        var randomCode;
        var randomCodeLen;
        var randomCharIndex;
        var newRandomCharIndex;
        var newRandomChar;
        for (var i = 0;
     i  20;
 i++) {
          randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1));
          randomCode = M.codes[randomCodeIndex];
          randomCodeLen = randomCode.length;
          randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1));
          newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1));
          newRandomChar = M.letters[newRandomCharIndex];
          randomCode[randomCharIndex] = newRandomChar;
    }
        M.swapCharacters();
  }
,  createLines: function() {
        M.linesC = document.createElement('canvas');
        M.linesC.width = M.WIDTH;
        M.linesC.height = M.HEIGHT;
        M.linesC.style.position = 'absolute';
        M.linesC.style.top = 0;
        M.linesC.style.left = 0;
        M.linesC.style.zIndex = 10;
        document.body.appendChild(M.linesC);
        var linesYBlack = 0;
        var linesYWhite = 0;
        M.ctx2 = M.linesC.getContext('2d');
        M.ctx2.beginPath();
        M.ctx2.lineWidth = 1;
        M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)';
    while (linesYBlack  M.HEIGHT) {
          M.ctx2.moveTo(0, linesYBlack);
          M.ctx2.lineto(M.WIDTH, linesYBlack);
          linesYBlack += 5;
    }
        M.ctx2.lineWidth = 0.15;
        M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    while (linesYWhite  M.HEIGHT) {
          M.ctx2.moveTo(0, linesYWhite + 1);
          M.ctx2.lineTo(M.WIDTH, linesYWhite + 1);
          linesYWhite += 5;
    }
        M.ctx2.stroke();
  }
,  assignColumn: function() {
        var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1));
    if (M.codes[randomColumn][0].open) {
          M.codes[randomColumn][0].open = false;
    }
 else {
          return false;
    }
        return randomColumn;
  }
,  randomFromInterval: function(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
  }
,  snapshot: function() {
        window.open(M.c.toDataURL());
  }
}
    ;
function eventListenerz() {
      var controlToggles = document.getElementsByclassname('toggle-info');
      var controls = document.getElementById('info');
      var snapshotBTn = document.getElementById('snapshot');
  function toggleControls(e) {
        e.preventDefault();
        controls.className = controls.className === 'closed' ? '' : 'closed';
  }
      for (var j = 0;
     j  2;
 j++) {
        controlToggles[j].addEventListener('click', toggleControls, false);
  }
      snapshotBtn.addEventListener('click', M.snapshot, false);
}
window.onload = function() {
      M.init();
      eventListenerz();
}
    ;
    

css代码：

 到此这篇关于HTML实现代码雨源码及效果示例的文章就介绍到这了,更多相关HTML代码雨内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！