介绍 & lt; ! DOCTYPE html>
& lt; html>
,,
& lt; head>,,,
,,,& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html; charset=utf-8"比;
,,,& lt; title> Code -by ZhenYu.Sha
,,,& lt; style 类型=拔谋?css"比;
,,,,,,,html, body {
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,身高:,100%;
,,,,,,,}
,,,,,,,body {
,,,,,,,,,,,背景:,# 000;
,,,,,,,,,,,溢出:,隐藏;
,,,,,,,,,,,保证金:,0;
,,,,,,,,,,,填充:,0;
,,,,,,,}
,,,& lt;/style>
& lt;/head>
,,
& lt; body>,,
& lt; canvas id=癱vs"祝辞& lt;/canvas>
& lt; script 类型=拔谋?javascript"比;
,,,var cvs =, . getelementbyid (“cvs");
,,,var ctx =, cvs.getContext (“2 d");
,,,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 =,方法(时间/cw 14);,//代码雨列数
,,,var step =, 16,,,,,//步长,每一列内部数字之间的上下间隔
,,,ctx.font =,“bold 26 px microsoft yahei",,//声明字体,个人喜欢微软雅黑
,,,function createColorCv (), {
,,,,,,,//画布基本颜色
,,,,,,,ctx.fillStyle =,“# 242424“;
,,,,,,,ctx.fillRect(0, 0,连续波,,ch);
,,,}
,,,//创建代码雨
,,,function createCodeRain (), {
,,,,,,,for (var n =, 0;, n & lt;,关口;,n + +), {
,,,,,,,,,,,var col =, [];
,,,,,,,,,,,//基础位置,为了列与列之间产生错了位
,,,,,,,,,,,var basePos =,方法(math . random (), *, 300);
,,,,,,,,,,,//随机速度,3 ~ 13之间
,,,,,,,,,,,var speed =,方法(math . random (), *, 10), +, 3;
,,,,,,,,,,,//每组的x轴位置随机产生
,,,,,,,,,,,var colx =,方法(math . random(), *,连续波)
,,,,,,,,,,,//绿色随机
,,,,,,,,,,,var rgbr =, 0;
,,,,,,,,,,,var rgbg =,方法(math . random (), *, 255);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍”一招实现“代码雨”的方法”,在日常操作中,相信很多人在一招实现“代码雨”的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”一招实现“代码雨”的方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
<强>先看看效果
1,绿色:
2,彩色:
3,背景色:
4,绿色逐渐变浅:
<强>源代码:
