几乎 100% 还原了黑客帝国中的代码雨特效 - V2EX
2021-01-16 20:53:58 Author: jp.v2ex.com(查看原文) 阅读量:269 收藏

演示地址 CodePen 此示例可以轻易自定义各种参数,或者嵌入自己的网站。

虽然我现在做前端 Web 开发,但是做页面或业务还是及不上自己创造的感觉,所以在一段努力之后创造了基于 HTML5 Canvas 2d 的开发框架 janvas

在此基础上开发了一些示例的代码:janvasexamples

目前在考虑想接需求,或者大家有推荐的好点的做内容输出的网站吗,比如 CSDN 一类的。

顺便可不可以求一点小心心。

ijrou

3

ijrou   8 小时 11 分钟前

挺有意思的~~

youla

5

youla   8 小时 4 分钟前

我想放在我的博客园里。

M3oM3oBug

8

M3oM3oBug   7 小时 52 分钟前

@youla 放吧,引入 janvasexamples 库或者单独复制那段代码,直接以 document.body 为容器就可以

M3oM3oBug

9

M3oM3oBug   7 小时 48 分钟前

@youla 可爱风的博客园啊哈哈,你也可以考虑在 props 里自己修改一些配置适配这个可爱风~

youla

10

youla   7 小时 35 分钟前

@M3oM3oBug 做得太水了,之前刚学习前端时,草草做的页面,代码还是 jquery 拼接,导致我已经没办法写代码了,发 /浏览 博客的功能都被搞丢了,有时间的话可能会用 vue.min.js 全部改了。之前上面原有的 console 是可以输内容的,rm -rf / 回车就会执行 document.body.innerHTML=''把页面清空。因为这个挺好看的,所以就直接把之前的功能换掉了,感谢!!!

roshad

13

roshad   7 小时 26 分钟前

?黑客帝国全是日语吗?我看的时候没发现

OHyn

14

OHyn   7 小时 23 分钟前

很漂亮!

M3oM3oBug

16

M3oM3oBug   7 小时 10 分钟前

@roshad [这个](

) 应该是原版,前两天做这个效果的时候查了一下好像是说翻转的片假名,我就按照 x, y 随机翻转片假名了,可以 chars: ["你", "想", "要", "的", "字", "符"] 来自定义

x86

18

x86   7 小时 7 分钟前 via iPhone

07 年那会很多黑页都是这个

revalue

19

revalue   6 小时 47 分钟前   ❤️ 1

万人血书火星文版

cigarzh

20

cigarzh   6 小时 41 分钟前

不支持 Safari ?

M3oM3oBug

22

M3oM3oBug   6 小时 31 分钟前

@revalue 你进那个 CodePen 的地址,改 chars: "添加你想要的字符".split("") 就可以了

@cigarzh 我手机的 Safari 可以的诶刚刚试了

hantsy

23

hantsy   6 小时 10 分钟前

大学时候最这个最初是用 Flash ActionScript 编程实现的。

hantsy

25

hantsy   6 小时 9 分钟前

Flash 动画还是经典的火柴人,把成龙那些招势全部加入了。

Kiske

26

Kiske   6 小时 6 分钟前   ❤️ 1

大佬, 我可以把它发布在 steam wallpaper engine 的创意工坊里吗

M3oM3oBug

27

M3oM3oBug   6 小时 2 分钟前

@hantsy 以后需要 Flash 处理的内容会不会有可能转变为 Canvas 需求,或者是舍弃了那些需求还是换了什么其他的解决方案呢?。

@Kiske 标注出处就行,你是想把桌面背景换成这嘛哈哈。

konnnnn

31

konnnnn   5 小时 46 分钟前

原版是从他妻子的菜谱上随便找的

vfxx

32

vfxx   4 小时 56 分钟前

喜欢

Kilerd

33

Kilerd   4 小时 48 分钟前

好家伙,吃掉了我 30% 的 CPU 资源

M3oM3oBug

36

M3oM3oBug   4 小时 30 分钟前

@Kilerd 我处理器 E3-1231v3 也是差不多,为了尽可能还原原特效:
每个 Text 都在进行矩阵变换(左右上下翻转),Text 的 Hsl 颜色饱和度和亮度都是不同的,拖尾效果是留下了一个 Text 并按照颜色的亮度决定透明度减小直到消失后复用
感觉最主要消耗时间的还是原生的 fillText 方法,这我也没法处理哈哈
其实已经很快了,谁能复现这个且比我的占用更低我拜他为师,嗑仨响头的那种

youla

37

youla   4 小时 24 分钟前

@ligiggy 一直准备换个温柔点的,忘了。。

@magic3584 因为我引用了一个叫 pixi.js 的 sdk,我用的最新版,貌似除了 chrome 都不支持。

love

38

love   4 小时 17 分钟前

原版似乎要密要快,这个一开始太稀稀拉拉了没那种感觉

James369

39

James369   4 小时 10 分钟前

1.缺少三维空间感。2. 字体太圆润细腻,缺少黑客科技感。

towser

45

towser   3 小时 55 分钟前

以前很多黑客网站首页都是这种特效,还伴随着不约而同但也不知道叫什么名的振奋音乐。

Kiske

46

Kiske   3 小时 50 分钟前

@Hugehard 我没有验证手机号,链接直接发不出来, 用 base64 解码以下

aHR0cHM6Ly9zdGVhbWNvbW11bml0eS5jb20vc2hhcmVkZmlsZXMvZmlsZWRldGFpbHMvP2lkPTIzNjMzNTYzNzM=

whitehack

51

whitehack   3 小时 18 分钟前

只有我发现这不是开源项目吗? 而且还没有 ts 定义

p1gd0g

52

p1gd0g   1 小时 52 分钟前

已经出现的字符不是不会变吗?
(我在关注些什么。。。

ETiV

54

ETiV   1 小时 23 分钟前 via iPhone

想起了当年玩 Flash 的时光…

gkiwi

55

gkiwi   1 小时 13 分钟前

棒!


文章来源: https://jp.v2ex.com/t/745451#reply56
如有侵权请联系:admin#unsafe.sh