代码雨教程

最新推荐文章于 2023-08-04 14:01:17 发布
最新推荐文章于 2023-08-04 14:01:17 发布
阅读量1w 收藏 5
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangdepei/article/details/117691196
版权

可以用电脑自带的文本文档打，很简单的。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <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;

                        }

                        //颜色也随机变化

 

                        //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";

 

//绿色逐渐变浅

 

//ctx.fillStyle = "hsl(123,30%,"+(30-i*2)+"%)";

 

//绿色随机

//var r= 0;

//var g= parseInt(Math.random()*255) + 3;

//var b= 0;

//ctx.fillStyle = "rgb("+r+','+g+','+b+")"

ctx.fillStyle = code.color;

                        //把代码画出来

                        ctx.fillText(code.text,code.x,code.y);

                    }

                }

                requestAnimationFrame(codeRaining);

            }

 

            //创建代码雨

            createCodeRain();

            //开始下雨吧 GO>>

            requestAnimationFrame(codeRaining);

        </script>

    </body>

</html>

 

 

图片展示：

huangdepei
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【Web前端特效源代码】“代码雨”纯HTML源码实现及效果|“代码雨”特效教程：从零开始实现炫酷的HTML、CSS和JavaScript动画|一步步教你实现代码雨|从零到一|新手必看|新手友好简单易懂
南北极之间
06-11 205
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。元素是 HTML5 引入的一个非常强大的绘图工具，但对于新手来说，它的使用可能会有些复杂。要使代码雨动起来，必须理解如何使用 JavaScript 创建动画。尽管代码雨效果看起来简单，但如果没有优化，可能会影响页面性能。为了实现代码雨效果，需要管理每个字符的位置和状态。要确保代码雨在窗口大小变化时仍能覆盖整个屏幕，必须处理。
canvas实现简单代码雨
Yuoliku的博客
06-24 2104
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa...
PYCHARM 代码雨
2301_76573286的博客
08-04 320
代码雨主要运用pygame模块然后用random产生随机。相信大家对黑客的第一印象是黑背景，绿代码，看起来很酷。如果pygame未安装则在pycharm终端输入。我做的是字母和数字组合的代码雨 能看懂就复制下来。材料：pycharm2023 、pygame。今天，咱们就用pycharm做一个代码雨。如果嫌速度慢可以用pip国内镜像源。首先，从海龟库中导入模块。
三分钟教你实现“代码雨”
qq_45750154的博客
04-28 1万+
本篇文章介绍一下如何实现“代码雨”。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 先看看效果 1、绿色： 2、彩色： 3、背景色： 4、绿色逐渐变浅： 源代码： <!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title&...
30行python代码实现“代码雨”
Rocky006的博客
05-29 756
当然，真实情况与上述想象当然是毫不相干了，但是既然有了想象，为啥不去靠自己的尝试去实现一下呢？所以，我们这次就用非常简单的30行代码来实现一个代码雨的效果，满足一下我们的幻想和好奇心。提到编程，我想很多人的第一印象就是影片中的黑客形象，在黑色背景下敲击键盘，打出闪烁着绿光的字体，潜入破解一个个系统......上手 python，很多人最先接触的就是pygame 包了，能在有一定趣味性的同时，建立起对 python 的基本认识。两个包，首先，将他们导入：​​​​​​。完整代码如下：​​​​​​​。
如何用BAT语言制作横向代码雨？
2301_78588271的博客
06-20 1748
（提示：%random%需要复制很多遍，因为这个复制得越多，代码雨越长）可以用命令提示符或Windows Power Shell打开。
用java写的代码雨
06-09
用java写的应用程序，可以实现代码雨，关键还可以用做电脑桌面。
抖音爆火的黑客帝国文字雨HTML页面
08-13
抖音爆火的黑客帝国文字雨HTML页面。最近抖音上很多小伙伴都在玩的文字雨效果HTML页面，仿照知乎大佬学做了一个。速度文字可调，其实还有另外一版鬼畜效果，暂时就不拿出来分享了，哈哈。祝大家玩得开心，嘻嘻嘻。溜了
代码雨实现原理与代码分析
热门推荐
半壶老酒
11-13 3万+
闲来无事，好奇代码雨是怎么实现的，早就听说是利用链表，但自己却想不出实现的思路，花了两个晚上把代码看完了，分析都在代码里，先看下效果吧。 在贴代码之前先简单说下代码，方便读者加深理解。 代码雨所用到的知识=简单的windows api + C/C++的循环双向单链表。 对，就是这么简单。当然读者也不必掌握windows api，代码都有注释，如果读者想理解的更深入的，可以百度下，我们
Opengl教程源代码
10-27
OpenGL教程源代码是一个针对初学者和进阶者的资源，它涵盖了OpenGL 3.3的核心特性。OpenGL是一个跨语言、跨平台的图形库，用于渲染2D、3D矢量图形，广泛应用于游戏开发、科学可视化、工程模拟等领域。这个教程通过源...
用py实现代码雨的效果
12-17
在Python编程语言中，"代码雨"是一种视觉特效，它模拟了字符或代码从屏幕顶部向下落下的场景，常在电影或黑客相关的场景中出现。本教程将详细讲解如何使用Python来实现这样的效果。 首先，我们需要了解Python的基础...
黑客帝国代码雨.bat
05-29
抖音最近比较火爆的 黑客帝国-代码雨，因为页面炫酷，适合装逼，有种身临黑客其境，深受很多用户喜爱收藏。本着好奇的心学习研究探讨，今将其分享，需要的小伙伴赶紧看看收藏吧~
CodeRain.jar
09-16
代码特效锁屏, 左边是按照linux 系统参数格式排列的, 右边是仿照日志实时的打印的滚动数据流,颜色都定为白色,渐进加深, 也可以改为绿色,双击后锁屏, 打开锁屏密码: gg
C#数字雨屏幕保护程序源码
04-22
c#写的数字雨屏幕保护程序。将生成的可执行程序后缀改为scr后放入C:\Windows\System32文件夹下便可以将其设置为屏幕保护程序，360报毒请无视。
桌面字符雨效果C++源码
07-11
C++实现的桌面字符雨效果，可供C++初学者参考学习，提高对编程的兴趣
用C语言编写的数字雨代码
09-01
压缩包内附有截图，和屏保的差不多。一共两百多行代码。可供学习观摩之用。
python项目实例源码 实例-02 代码雨
11-02
【Python项目实例源码——代码雨】 在编程领域，"代码雨"通常指的是大量代码连续不断地出现在屏幕上，形成一种如同下雨般的视觉效果。这个Python项目实例是为初学者设计的，旨在通过实践来帮助他们更好地理解和掌握...
图像去雨代码-教程-计算机作业
最新发布
08-15
这个压缩包文件提供了图像去雨的代码教程，适用于计算机作业或学习项目。让我们详细了解一下相关知识点。 首先，图像去雨的目标是去除图像中的雨滴、雨丝等元素，恢复图像的真实背景。这项技术在监控视频分析、自动...
代码雨.zip
08-30
"代码雨.zip"这个压缩包文件的名称暗示了其内容可能与编程或软件开发相关，尤其是在描述中同样只提到了"代码雨"，这通常在编程领域用来形象地描述大量代码快速输出或下落的场景，可能是某个编程教程、代码示例集合...
图像去雨Python代码教程
03-31
本教程将介绍如何使用Python编写图像去雨的程序。我们将使用OpenCV库和Python语言来实现这个任务。 步骤1：导入库 首先，我们需要导入必要的库。我们将使用OpenCV库来处理图像。我们还将使用numpy库来进行数学运算。 ``` import cv2 import numpy as np ``` 步骤2：读取图像 我们将使用OpenCV库的imread函数来读取图像。如果图像文件不在当前工作目录中，我们需要使用完整路径。 ``` img = cv2.imread('image.jpg') ``` 步骤3：转换为灰度图像 为了更容易地处理图像，我们将将图像转换为灰度图像。我们可以使用OpenCV库的cvtColor函数来实现这一点。 ``` gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) ``` 步骤4：提取边缘 我们将使用Sobel算子来提取边缘。Sobel算子是一种基于差分的算子，用于检测图像中的边缘。 ``` sobel_x = cv2.Sobel(gray, cv2.CV_64F, 1, 0, ksize=5) sobel_y = cv2.Sobel(gray, cv2.CV_64F, 0, 1, ksize=5) edges = cv2.addWeighted(sobel_x, 0.5, sobel_y, 0.5, 0) ``` 步骤5：去除雨滴 我们将使用一种称为自适应直方图均衡化的技术来去除雨滴。这种技术可以增加图像的对比度，使雨滴更容易被检测和去除。 ``` clahe = cv2.createCLAHE(clipLimit=3.0, tileGridSize=(8,8)) cl1 = clahe.apply(edges) ``` 步骤6：二值化图像 我们将使用二值化技术来将图像转换为黑白图像。这样做可以更容易地检测和去除雨滴。 ``` ret, thresh = cv2.threshold(cl1, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) ``` 步骤7：去除噪声 我们将使用形态学操作来去除图像中的噪声。这种操作可以通过膨胀和腐蚀图像来实现。 ``` kernel = np.ones((3,3),np.uint8) closing = cv2.morphologyEx(thresh, cv2.MORPH_CLOSE, kernel) ``` 步骤8：显示图像 最后，我们将使用OpenCV库的imshow函数来显示图像。 ``` cv2.imshow('Original Image', img) cv2.imshow('Processed Image', closing) cv2.waitKey(0) cv2.destroyAllWindows() ``` 完整代码如下： ``` import cv2 import numpy as np # Read image img = cv2.imread('image.jpg') # Convert to grayscale gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # Extract edges sobel_x = cv2.Sobel(gray, cv2.CV_64F, 1, 0, ksize=5) sobel_y = cv2.Sobel(gray, cv2.CV_64F, 0, 1, ksize=5) edges = cv2.addWeighted(sobel_x, 0.5, sobel_y, 0.5, 0) # Remove raindrops clahe = cv2.createCLAHE(clipLimit=3.0, tileGridSize=(8,8)) cl1 = clahe.apply(edges) # Binarize image ret, thresh = cv2.threshold(cl1, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) # Remove noise kernel = np.ones((3,3),np.uint8) closing = cv2.morphologyEx(thresh, cv2.MORPH_CLOSE, kernel) # Show images cv2.imshow('Original Image', img) cv2.imshow('Processed Image', closing) cv2.waitKey(0) cv2.destroyAllWindows() ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值