MatrixBG 代码瀑布的实现
黑客帝国中代码瀑布是怎么实现的呢?
我们可以通过 window.innerWidth获取屏幕的宽度W,并规定字符的大小size,那么屏幕中共有 W/size 列字符出现,
我们不断的去更改每一列中文字的y坐标,就可以实现文字运动的效果
没怎么学过js,但是代码还是很容易看懂的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
*{padding:0;margin:0}
html{overflow:hidden}
</style>
</head>
<body>
<canvas id="canvas" style="background:#111"></canvas>
<script type="text/javascript"> window.onload = function(){ //当页面加载时调用一下内容 var canvas = document.getElementById("canvas");//获取画布对象 var context =canvas.getContext("2d");//获取画布的上下文 //获取浏览器屏幕的宽度和高度
var W = window.innerWidth;
var H = window.innerHeight; //设置canvas的宽度和高度
canvas.width = W;
canvas.height = H; var fontSize = 16;//每个文字的字体大小 var colunms = Math.floor(W /fontSize); //计算列 var drops = [];//记录每列文字的y轴坐标 for(var i=0;i<colunms;i++){//给每一个文字初始化一个起始点的位置
drops.push(0);
} var str ="javascript html5 canvas";//运动的文字
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "700 "+fontSize+"px 微软雅黑";
//给字体添加颜色
context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色,十六进制颜色
//写入画布中
for(var i=0;i<colunms;i++){
var index = Math.floor(Math.random() * str.length);
var x = i*fontSize;
var y = drops[i] *fontSize;
context.fillText(str[index],x,y);
//如果要改变时间,肯定就是改变每次他的起点
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
}
}; function randColor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
} draw();
setInterval(draw,30);
}; </script> </body>
</html>
MatrixBG 代码瀑布的实现的更多相关文章
- AJAX异步实现简单的瀑布流
传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...
- [最直白版]一步一步教你用VMware Workstation12安装Ubuntu 16.04和VMware Tools的教程
[最直白版]Win10下一步一步教你用 VMware Workstation12安装Ubuntu 16.04和VMware Tools的教程 安装过程中使用的软件(要保证电脑里面有下列三个东西): 1 ...
- jquery瀑布流排列样式代码
<!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- Grid布局20行代码快速生成瀑布流
网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...
- web前端学习笔记-瀑布流的算法分析与代码实现
瀑布流效果目前应用很广泛,像花瓣,新浪轻博,蘑菇街,美丽说等好多网站都有.也有好多支持该效果的前段框架,今天学习了一下这种效果的实现,不依赖插件,自己动手分析实现过程,为了便于叙述清楚,分析中的一些名 ...
- iOS开发:代码通用性以及其规范 第一篇(附带,自定义UITextView\进度条\双表显示\瀑布流 代码设计思路)
在iOS团队开发中,我见过一些人的代码,也修改过他们的代码.有的人的代码写的非常之规范.通用,几乎不用交流,就可以知道如何修改以及在它基础上扩展延生.有的人的代码写的很垃圾,一眼看过去,简直会怀疑自己 ...
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...
随机推荐
- The CLI moved into a separate package: webpack-cli.解决办法
The CLI moved into a separate package: webpack-cli.Please install ‘webpack-cli‘ in addition to webpa ...
- java方法笔记: split,instanceof,StringBuilder(),append(),string ,Integer,Math,正则表达式
http://swiftlet.net/archives/709 如果分隔符在前方,会显示“”,在尾部不显示: *|做分割,需要加\\ API文档如下 1.instanceof 查看前者是否是后者的实 ...
- mysql5.6安装优化实例
[client]port = 3306socket = /tmp/mysql.sock[mysqld]log-bin = /data/mysql/bin/mysqlbinlogserver-id = ...
- 剑指Offer_编程题_17
题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) /* struct TreeNode { int val; struct TreeNode * ...
- 利用css3给座右铭设置漂亮的渐变色
.footer-container .footer-content p .motto { font-weight: bolder; -webkit-background-clip: text; -we ...
- 服务发现 - consul 的介绍、部署和使用
什么是服务发现 相关源码: spring cloud demo 微服务的框架体系中,服务发现是不能不提的一个模块.我相信了解或者熟悉微服务的童鞋应该都知道它的重要性.这里我只是简单的提一下,毕竟这不是 ...
- VirtualBox下安装Ubuntu Server 16.04
安装环境: Windows:确保磁盘空间足够,一般需要8个G左右. 所需文件: 首先在Ubuntu的官网上下载.iso的镜像文件,链接是:http://www.ubuntu.org.cn/server ...
- CSS3笔记1
1.CSS字体设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- [C#]一个简易的、轻量级的方法并行执行线程辅助类
一个简易的.轻量级的方法并行执行线程辅助类 在实际应用中,经常要让多个方法并行执行以节约运行时间,线程就是必不可少的了,而多线程的管理经常又是一件头疼的事情,比如方法并行执行异步的返回问题,方法并 ...
- bzoj千题计划323:bzoj1951: [Sdoi2010]古代猪文(Lucas+CRT+欧拉定理)
https://www.lydsy.com/JudgeOnline/problem.php?id=1951 先欧拉降幂 然后模数质因数分解 分别计算组合数的结果,中国剩余定理合并 #include&l ...