模拟黑客帝国效果2（canvas实验）

cnTomato 发布于2019-08-19 18:46 / 2693人阅读

摘要：之前看到一个和应用的效果练了一下，演示这次用玩一下，感觉也还不错，传送门演示地址推荐开源来选取需引用的外部代码片段全屏文字转为数组用于计算输出文字时坐标，所以长度即为列数初始值输出文字让背景逐渐由透明到不透明文字颜色逐行输出文字随机

之前看到一个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

网络安全态势可视化

摘要：安全态势可视化系统的目的是生成网络安全综合态势图，以多视图多角度多尺度的方式与用户进行交互。可以看到，黑客攻击是无处不在，无时不有的，世界互联网的安全态势并不如我们印象中那么隐蔽和少见。导语网络态势可视化技术作为一项新技术，是网络安全态势感知与可视化技术的结合，将网络中蕴涵的态势状况通过可视化图形方式展示给用户，并借助于人在图形图像方面强大的处理能力，实现对网络异常行为的分析和检测...

testHs 2019-08-20 15:18 评论0 收藏0
每周一点canvas动画——序

摘要：每周一点动画是一个系列文章，本文并不对的做过多的介绍，我默认你已经了解基本的绘图，并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。下一节，我们就正式开始我们的动画之旅《每周一点canvas动画》是一个系列文章，本文并不对canvas的API做过多的介绍，我默认你已经了解基本的canvas绘图API，并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。一说到物理和数...

svtter 2019-08-19 18:01 评论0 收藏0
Canvas getContext("3d")?

摘要：两条平行的直线在无穷远的地方看起来会汇集到一起，而汇集的点，在透视里称作消失点。小孔成像三维空间的火焰，透过小孔，在二维成像屏上显示了二维的画面。前言不好意思，标题其实是开了个玩笑。大家都知道，Canvas 获取绘画上下文的 api 是 getContext(2d)。我第一次看到这个 api 定义的时候，就很自然的认为，既然有 2d 那一定是有 3d 的咯？但是我接着我看到了 a...

tinna 2019-08-20 15:27 评论0 收藏0
Python 实现 FTP 弱口令扫描器

摘要：一项目说明项目简介本次实验通过使用实现一个弱口令扫描器开始，入门渗透测试技术，实验涉及协议原理，库的使用等知识点。找到密码并不会终止程序，而是会继续扫描其他主机的弱口令，直到所有的主机都扫描一遍。 showImg(https://segmentfault.com/img/bVz0PF); 一、项目说明 1.1 项目简介本次实验通过使用 Python 实现一个 FTP 弱口令扫描器开始...

cocopeak 2019-07-25 10:41 评论0 收藏0