03-26 07:12 阅读 232

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

这篇文章主要介绍了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);

};

}());

// stats

var 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.globalCompositeOperation = '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代码：

@import url("http://fonts.googleapis.com/css?family=Carrois+Gothic");

@font-face {

  font-family: 'matrix-code';

  src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgFontName') format('svg');

}

html,

body {

  -webkit-font-smoothing: antialiased;

  font: normal 12px/14px "Carrois Gothic", sans-serif;

  width: 100%;

  height: 100%;

  margin: 0;

  overflow: hidden;

  color: #fff;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

body {

  background: black;

}

#stats {

  z-index: 100;

}

#info {

  background: rgba(0, 0, 0, 0.7);

  position: fixed;

  bottom: 0;

  left: 0px;

  width: 250px;

  padding: 10px 20px 20px;

  z-index: 100;

  -webkit-transform-origin: bottom center;

  -moz-transform-origin: bottom center;

  -o-transform-origin: bottom center;

  transform-origin: bottom center;

  -webkit-transform: rotate(0deg);

  -moz-transform: rotate(0deg);

  -o-transform: rotate(0deg);

  transform: rotate(0deg);

  -webkit-transition: -webkit-transform .5s ease-in-out;

  -moz-transition: -moz-transform .5s ease-in-out;

  -o-transition: -o-transform .5s ease-in-out;

  transition: transform .5s ease-in-out;

}

#info.closed {

  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -o-transform: rotate(180deg);

  transform: rotate(180deg);

}

.toggle-info {

  position: absolute;

  display: block;

  height: 10px;

  background: rgba(0, 0, 0, 0.8);

  width: 290px;

  left: 0;

  text-align: center;

  padding: 3px 0 7px;

  text-decoration: none;

  color: white;

  text-shadow: none;

}

.toggle-info:hover {

  background: rgb(0, 0, 0);

}

#close {

  top: -20px;

}

#open {

  bottom: -20px;

  -webkit-transform: rotate(-180deg);

  -moz-transform: rotate(-180deg);

  -o-transform: rotate(-180deg);

  transform: rotate(-180deg);

}

button {

  background: rgba(255, 255, 255, 0.2);

  color: #fff;

  border: 0;

  border-radius: 2px;

  padding: 7px 10px;

  box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);

  cursor: pointer;

}

button:hover {

  background: rgba(255, 255, 255, 0.1);

}

pa {

  color: #fff;

}

pa:hover {

  color: #EFFDEB;

  text-shadow: 0px 0px 5px #75AD61;

}

到此这篇关于HTML实现代码雨源码及效果示例的文章就介绍到这了