当前位置:新闻中心 > 技术干货

干货:酷炫的黑客特效是怎么做出来的?

来源:天融信教育

号称只有程序员才能看懂的好莱坞烧脑大片《黑客帝国》已经诞生二十年了,电影开头时会有很多绿色的字符如雨点一样在屏幕上落下,这些字符告诉那些能读懂它的人,在矩阵(Matrix)中发生了什么。当第一次看到这一特效,我们的心情是这样的……



当然了,我们不是影片的主人公“救世主”尼奥,读懂还是不懂,对我们也不重要,据矩阵代码的设计师西蒙•怀特利所说,这些代码是他日本妻子美食书上的寿司配方。但是,我们是天融信教育,搞技术,我们是认真的。

接下来,我们就给大家讲讲怎么样在自己的电脑上实现这个酷炫屌炸天的特效。

01

首先,打开一个编辑器,就记事本也可以,复制以下代码:

< html >

< head >

< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

< style>*{margin:0;overflow:hidden;}canvas{display:block;cursor:none;}

< title>你被黑了

< script >

window.onload=function(){

var c = document.getElementById("c");

var ctx = c.getContext("2d");

c.height = window.innerHeight;

c.width = window.innerWidth;

var font_size = 12;

var columns = c.width/font_size;

var drops = [];

for(var x = 0; x < columns; x++)

drops[x] = 1;

window.onresize = function(){

c.height = window.innerHeight;

c.width = window.innerWidth;

columns = c.width/font_size;

for(var x = 0; x < columns; x++)

drops[x] = 1;

}

function requestFullScreen() {

var de = document.documentElement;

if (de.requestFullscreen) {

de.requestFullscreen();

} else if (de.mozRequestFullScreen) {

de.mozRequestFullScreen();

} else if (de.webkitRequestFullScreen) {

de.webkitRequestFullScreen();

}

}

document.body.addEventListener('click',function(){

requestFullScreen();

},false);

function draw()

{

ctx.fillStyle = "rgba(0, 0, 0, 0.1)";

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 = String.fromCharCode(48+Math.random()*200);

ctx.fillText(text, i*font_size, drops[i]*font_size);

if(drops[i]*font_size > c.height || Math.random() > 0.96)

drops[i] = 0;

drops[i]++;

}

}

setInterval(draw, 33);

}

< /script >

< /head >

< body >

< canvas id="c" > < /canvas >

< /body >

< /html >


02

第二步,在文件菜单选择保存,注意两个地方,一是编码要选择UTF-8,不然汉字显示不正常;二是保存类型要选择“所有文件(*.*)”,不然保存不了网页文件。我们假定保存在D盘的www目录下,保存文件名是index.htm。

03

接下来就是见证奇迹的时刻了,打开我的电脑,进入D盘的www目录,双击index.htm文件,看到的效果是这样子的:

04

当然了,独乐乐不如众乐乐,我们不光要自己爽,还要大家一起嗨,怎么办?当然是发布成网站了,提到网站,大家脑海里是不是浮现出了Apache、IIS、Nginx、PHPStuday各路大佬,不会这么复杂吧?

该是时候请出我们的PYTHON大仙了,我们打开CMD,只需要敲入以下命令:

现在打开浏览器,输入自己电脑的IP地址,你能看到如下画面:

可能有同学要说了?为什么IP地址是127.0.0.1呢?因为这是在自己的电脑里操作的,127.0.0.1就是指自己,如果是舍友的电脑,那就不能这么愉快的玩耍了,要输入你电脑的局域网IP了,形式诸如192.168.*.*。那能不能让老家的小伙伴们也体验一下这酸爽的感觉呢,我看你是钱多得没处花了,还不赶紧买个云主机去?


最后,强烈安利一下《黑客帝国》,20年过去了,一直被模仿,从未被超越。《黑客帝国》这部电影在我心目中仍然是排名前10的存在,影片讲述了一个荒诞虚构而又不乏严肃哲理性的幻想故事:人们生活在自己熟悉的世界里,每天忙忙碌碌,没有人感觉到这世界有任何异样。而有一天却有人告诉你这个世界的真相,这世界的一切,包括你正在呼吸的空气,你的感觉,你的生活,都是由虚拟世界母体程序预先设计好的幻相。

呵呵,怎么感觉你在讲VR?不是我牛,是导演早在20年前就已经看破了一切。

抛开故事的思想内涵不说,就冲着基努李维斯年轻时的盛世美颜,小伙伴们是不是也该好好刷一波儿电影呢?


声明:该文章仅用于学术交流


感兴趣的小伙伴

扫描下方二维码