黑客帝国代码雨JS，支持中文
2024-05-16 15:52:27
有人要的HTML-JS版黑客帝国代码雨，支持自定义文字中文，保存HTML文件可运行。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="canonical" href="https://www.tianlunvip.com/demo/7115.html">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="网页特效,骇客帝国文字矩阵,骇客帝国文字代码雨">
<meta name="keywords" content="HTML5,canvas,JavaScript">
<meta name="author" content="tianlunvip@outlook.com">
<meta name="generator" content="tianlunvip">
<title>骇客帝国文字矩阵</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{overflow: hidden;}
</style>
</head>
<body>
<canvas id="matrixBG"></canvas>
<script type="text/javascript">var canvas = document.getElementById("matrixBG");
var ctx = canvas.getContext("2d");canvas.width = window.innerWidth;
canvas.height = window.innerHeight;function random(min, max) {return Math.random()*(max-min)+min;
}var Matrix = (function() {function Matrix(element) {this.x = element.x // 初始X位置 每间隔一个文字元素this.y = element.y // 初始X位置 每间隔一个文字元素this.ctx = element.ctx}Matrix.prototype = {constructor: Matrix,init: function() { this.text = "" // 自定义文本内容this.text_lenght = random(10, 40); // 文本长度this.speed = random(15, 30);; // 落体速度this.text_pix = 16; // 单个文本像素宽高this.op = 1; // 初始透明度if(this.text == "") { // 如果未设置文本则生成随机for(var i = 0; i < this.text_lenght; i++) {this.text += String.fromCharCode(30+Math.floor( Math.random()*95 ));} } else {if(this.text.length < this.text_lenght) {var l = Math.ceil(this.text_lenght / this.text.length);this.text = this.text.repeat(l);}this.text = this.text.substring(0, this.text_lenght);}},draw: function() {this.ctx.font = '10pt Georgia';var l = this.text_lenght * this.text_pix; // 字体显示总长度var y = this.y > l ? l : this.y; // 当前显示字体的长度var loop = Math.ceil(y / this.text_pix); // 当前显示字体的个数for(var i = 0; i < loop; i++) {var op = this.op - (1/loop)*(i + 1); // 当前透明度this.ctx.fillStyle='rgba(0,255,0,'+ op +')';var text = this.text.charAt(random(0, this.text_lenght-1)); // 可设置为固定文本this.ctx.fillText(text, this.x, this.y-(i*this.text_pix));}},update: function() {var l = this.text_lenght * this.text_pix;this.y += this.speed;if(this.y > l) { // 如果字体全部显示 可降低透明度// this.op -= 0.03;}if((this.y - l) >= window.innerHeight || this.op <= 0) {this.y = 0;this.init();}}}return Matrix;
})();var MatrixControl = (function(){function MatrixControl(element) {this.matrixs = []this.ctx = element.ctx} MatrixControl.prototype = {constructor: MatrixControl,// 根据参数，创建雨滴createMatrix: function() {var oThis = this;var oI = 0;for (var i = 0; i < window.innerWidth; i+=16) {var matirxObj = new Matrix({x: i, y: random(-500, 0),ctx: oThis.ctx})matirxObj.init()oThis.matrixs.push(matirxObj)}},animation: function() {var oThis = this;setInterval(function(){oThis.ctx.fillStyle='rgb(0,0,0)';oThis.ctx.fillRect(0,0,window.innerWidth,window.innerHeight);for (var i = 0; i < oThis.matrixs.length; i++) {oThis.matrixs[i].update();oThis.matrixs[i].draw()}}, 120)},// 整合方法start: function() {this.createMatrix()this.animation()} }return MatrixControl;})();const matrixObj = new MatrixControl({ctx: ctx})
matrixObj.start();</script>
</body>
</html>黑客帝国代码雨JS，支持中文相关推荐
- Canvas修行之黑客帝国代码雨
既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...
- 代码雨代码源复制_超火！黑客帝国代码雨
黑客帝国代码雨 相信看过<黑客帝国>的同学,对上面的的这个图片一定不陌生,这是一个非常经典的画面.在繁忙的工作之余,大家也要放松下自己,今天就给大家分享一下代码滚动的实现方法. 第一步,新 ...
- vbs代码炫酷效果_Python|实现黑客帝国代码雨效果
Python|实现黑客帝国代码雨效果 估计大家都看过电影<黑客帝国>吧,片中的一段代码雨片段实在是炫酷,试想一下,片中的代码雨效果在自己电脑屏幕上实现了会是一种什么样的感觉,会不会有种身临 ...
- 抖音黑客帝国代码雨——程序大神如何攻占抖音？简直不可思议！
在普通人的脑补中,程序员可能是这样的 不知道为什么,这张图总是能莫名触发技哥的笑点. 亦或是这样的 每天无休止的与代码和Bug打着交道-- 等等,这好像不对啊.当初看黑客帝国的时候可不是这么心酸的,看 ...
- ＜黑客帝国-代码雨＞超火（免费送）
(刚学的,还有好多地方做的不完善,后期继续跟进,直接复制代码,后缀名改为:.html ,直接运行就可以看到效果啦!) 或者:使用HBuilder,创建HTML文件直接运行即可看到效果! <!DO ...
- 黑客帝国代码雨怎么弄？（最全，最简单，看完就会）
首先在桌面上创建一个文本文档 然后打开然后将下面的代码复制粘贴过去: <!DOCTYPE html><html> <head> <title>兴趣小组& ...
- JQuery实现——黑客帝国代码雨效果
效果如你所见就是本页面上方那样的效果 实现方法来自一个印度小伙纸,学习完我也没总结一下,今儿个补上 如何实现,大家右键查看源码复制即可,不过学习的过程还是要总结总结. 下面通过另外两个小例子,一步一步 ...
- python命令数字雨_用Python实现黑客帝国代码雨效果（3种方式）
说起电影<黑客帝国>,相信大部分人都看过或听说过,影片中有一个场景数字雨,如果你看过电影的话,应该对这个经典场景印象深刻,本文我们利用 Python 以数字.字母.图片三种形式来实现这一效 ...
- Mapbox GL JS 支持 中文标注
mapbox官方提供了对应的语言插件. 方法 安装 npm install --save mapbox-gl @mapbox/mapbox-gl-language 使用 import MapboxLa ...
最新文章
- python使用matplotlib可视化、移除可视化图像坐标轴的刻度线和标签( remove the default axis ticks and labels)
- pandas使用replace函数移除dataframe数值数据中的逗号并基于处理后的数据生成新的整型数据列（remove comma from column values in Pandas）
- ASP.NET Core奇遇记：无用户访问，CPU却一直100%
- JAVA另类_java stream的几种另类用法
- hashmap底层原理_Java集合 - HashMap原理(一) 概念和底层架构
- python数组删除最后一个元素_删除numpy数组中的最后一个元素
- notejs环境搭建
- Hive启动的三种方式
- 个人电脑防止被入侵的设置方法。
- 计算机组成原理——输入输出系统
- 常见电容器图片_电容的电路符号及图片识别
- 如何让移动硬盘在Mac和Windows上通用使用
- 【数论】快速分解质因数的技巧 筛法求素数（快速筛）
- AndroidX是什么？
- 闲人闲谈ERP项目逸事——德国做SAP项目回忆
- WPS中的word如何取消英文首字母大写
- 戴文渊 李一男 李三琦
- python添加win32com包，将ppt转换为图片
- 按ASC码对字符串排序
- 令人吐血的女大学生平安信.