摘要:之前看到一个和应用的效果练了一下,演示这次用玩一下,感觉也还不错,传送门演示地址推荐开源来选取需引用的外部代码片段全屏文字转为数组用于计算输出文字时坐标,所以长度即为列数初始值输出文字让背景逐渐由透明到不透明文字颜色逐行输出文字随机
之前看到一个css和js应用的效果练了一下,演示:
这次用canvas玩一下,感觉也还不错,
Github传送门:https://github.com/EchoLsx/hacker
演示地址:http://codepen.io/echo_lsx/pen/ZOaOyZ
</>复制代码
</>复制代码
/*Javascript代码片段*/
var c = document.getElementById("c");
var ctx = c.getContext("2d");
//全屏
c.height = window.innerHeight;
c.width = window.innerWidth;
//文字
var txts = "101010110101";
//转为数组
txts = txts.split("");
var font_size = 16;
var columns = c.width/font_size;
//用于计算输出文字时坐标,所以长度即为列数
var drops = [];
//初始值
for(var x = 0; x < columns; x++)
drops[x] = 1;
//输出文字
function draw()
{
//让背景逐渐由透明到不透明
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //文字颜色
ctx.font = font_size + "px arial";
//逐行输出文字
for(var i = 0; i < drops.length; i++)
{
//随机取要输出的文字
var text = txts[Math.floor(Math.random()*txts.length)];
//输出文字,注意坐标的计算
ctx.fillText(text, i*font_size, drops[i]*font_size);
//如果绘满一屏或随机数大于0.95(此数可自行调整,效果会不同)
if(drops[i]*font_size > c.height || Math.random() >0.95)
drops[i] = 0;
//用于Y轴坐标增加
drops[i]++;
}
}
setInterval(draw, 100);
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79982.html
摘要:每周一点动画是一个系列文章,本文并不对的做过多的介绍,我默认你已经了解基本的绘图,并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。下一节,我们就正式开始我们的动画之旅 《每周一点canvas动画》是一个系列文章,本文并不对canvas的API做过多的介绍,我默认你已经了解基本的canvas绘图API,并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。一说到物理和数...
摘要:两条平行的直线在无穷远的地方看起来会汇集到一起,而汇集的点,在透视里称作消失点。小孔成像三维空间的火焰,透过小孔,在二维成像屏上显示了二维的画面。 前言 不好意思,标题其实是开了个玩笑。大家都知道,Canvas 获取绘画上下文的 api 是 getContext(2d)。我第一次看到这个 api 定义的时候,就很自然的认为,既然有 2d 那一定是有 3d 的咯? 但是我接着我看到了 a...
摘要:一项目说明项目简介本次实验通过使用实现一个弱口令扫描器开始,入门渗透测试技术,实验涉及协议原理,库的使用等知识点。找到密码并不会终止程序,而是会继续扫描其他主机的弱口令,直到所有的主机都扫描一遍。 showImg(https://segmentfault.com/img/bVz0PF); 一、项目说明 1.1 项目简介 本次实验通过使用 Python 实现一个 FTP 弱口令扫描器开始...
阅读 4499·2021-11-24 10:24
阅读 1456·2021-11-22 15:22
阅读 2116·2021-11-17 09:33
阅读 2510·2021-09-22 15:29
阅读 553·2019-08-30 15:55
阅读 1699·2019-08-29 18:42
阅读 2772·2019-08-29 12:55
阅读 1814·2019-08-26 13:55