使用canvas实现黑客帝国数字雨

效果图：

代码：

<!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-Compatible" content="ie=edge"><title>Document</title><style>body {margin: 0;padding: 0;}canvas {width: 100%;height: 100%;}</style></head><body><canvas style="background:#111"></canvas><script>//获取画布对象var can = document.querySelector("canvas");//获取画布的上下文var ctx = can.getContext("2d");//设置canvas的宽度和高度can.width = window.innerWidth;can.height = window.innerHeight;//每个文字的字体大小var fontSize = 16;//计算列var colunms = Math.floor(window.innerWidth / fontSize);//记录每列文字的y轴坐标var arr = [];//给每一个文字初始化一个起始点的位置for (var i = 0; i < colunms; i++) {arr.push(0);}//运动的文字var str = "you are a silly";//绘画的函数function draw() {//布满全屏的黑色遮罩层ctx.fillStyle = "rgba(0,0,0,0.05)";ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);//给字体设置样式ctx.font = "700 " + fontSize + "px  微软雅黑";//给字体添加颜色ctx.fillStyle = "#00cc33";//写入画布中for (var i = 0; i < colunms; i++) {var index = Math.floor(Math.random() * str.length);var x = i * fontSize;var y = arr[i] * fontSize;ctx.fillText(str[index], x, y);//如果文字的Y轴坐标大于画布的高度，1/100*colunms概率将该文字的Y轴坐标重置为0if (y >= can.height && Math.random() > 0.99) {arr[i] = 0;}//文字Y轴坐标+1arr[i]++;}}draw();setInterval(draw, 30);</script></body>
</html>

使用canvas实现黑客帝国数字雨相关推荐

canvas黑客帝国数字雨背景 html+css+js
效果(完整源码在最后): [html+css+js]黑客帝国数字雨源码分享可拿来作页面背景制作: 定义canvas标签: <canvas id="canvas">& ...
【黑客帝国数字雨屏保】基于Win32的黑客帝国数字雨屏幕保护程序（附VS工程代码文件和可执行文件）
运行效果代码结构 //黑客帝国数字雨花心胡萝卜 #包含 <windows.h> #包含 <stdlib.h>#define 时钟编号 1 #define 最大长度 25 / ...
实现黑客帝国数字雨效果
今日闲得慌,折腾了一个黑客帝国数字雨效果,还蛮不错的. 操作:新建一个文本文档,输入以下代码,再将扩展名修改为 Bat,运行即可. 命令提示符代码:(0-1) @echo off title 黑客帝 ...
【C/C++源码】黑客帝国数字雨
今天分享一个用C语言画黑客帝国数字雨的源码~ 用到的是easyx图形库绘图功能,所以需要下载安装easyx图形库,直接官网搜索下载即可,devC++用不了,需要另外配置哦!适用于Visual C++与 ...
【炫酷秀】仅用4行代码再现《黑客帝国》数字雨，可立即在终端实现！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 提到<黑客帝国>,字符雨可谓是让人印象深刻. 这种科技感爆棚的特效,你 ...
4行代码再现《黑客帝国》数字雨，在终端实现的那种
十三发自凹非寺量子位报道 | 公众号 QbitAI 提到<黑客帝国>,字符雨可谓是让人印象深刻. 这种科技感爆棚的特效,你是否也想来一套? 这个,可以有. 最近,名叫akinomy ...
python命令数字雨_用Python实现黑客帝国代码雨效果（3种方式）
说起电影<黑客帝国>,相信大部分人都看过或听说过,影片中有一个场景数字雨,如果你看过电影的话,应该对这个经典场景印象深刻,本文我们利用 Python 以数字.字母.图片三种形式来实现这一效 ...
Canvas修行之黑客帝国代码雨
既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...
canvas+gif.js打造自己的数字雨头像
前言昨天是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像?.你看我的头像牛逼不.今天介绍一个小demo,上传一个静态头像,就能得到一个动态的数字雨头像 ...

使用canvas实现黑客帝国数字雨

使用canvas实现黑客帝国数字雨相关推荐

最新文章

热门文章