这是一个创建于 1730 天前的主题，其中的信息可能已经有所发展或是发生改变。
演示地址 CodePen 此示例可以轻易自定义各种参数，或者嵌入自己的网站。
虽然我现在做前端 Web 开发，但是做页面或业务还是及不上自己创造的感觉，所以在一段努力之后创造了基于 HTML5 Canvas 2d 的开发框架 janvas。
在此基础上开发了一些示例的代码：janvasexamples
目前在考虑想接需求，或者大家有推荐的好点的做内容输出的网站吗，比如 CSDN 一类的。
顺便可不可以求一点小心心。
第 1 条附言 2021-01-19 21:22:17 +08:00
没想到得到这么多关注。。 @xuboying 朋友提到了虚化效果和光晕，不介意性能再涨一点点的朋友可以手动在 init() 方法中添加这行： this.$cfg.setShadowStyles(new janvas.ShadowStyle().setShadowColor("rgba(0, 255, 0, 0.3)").setShadowBlur(10)); 添加了阴影会更迷幻一点。。 还有朋友说数量似乎少了，其实原视频里貌似就差不多这个数量，不介意性能想更多数量可以修改 resize() 方法中 this.count = Math.floor(this.column / 4); 的值，4 改成 2 就加一倍数量了 可以在 CodePen 尝试一下
 | 1 beimenjun PRO 感觉挺有趣的 |
 | 2 oubfgiar 2021-01-16 12:33:47 +08:00 via iPhone 喜欢 |
 | 3 ijrou 2021-01-16 12:38:53 +08:00 挺有意思的~~ |
 | 4 novaa 2021-01-16 12:39:08 +08:00  1 sixsixsix |
 | 5 youla 2021-01-16 12:45:50 +08:00 我想放在我的博客园里。 |
 | 6 wdytoya 牛逼 |
| 7 youla 2021-01-16 12:56:29 +08:00 1 博客园加入了~~嘻嘻，博客园的代码乱糟糟的，也没时间整理，加上去毫无违和感~ https://www.cnblogs.com/iamverylovely |
 | 8 M3oM3oBug OP @youla 放吧，引入 janvasexamples 库或者单独复制那段代码，直接以 document.body 为容器就可以 |
| 10 youla 2021-01-16 13:14:22 +08:00 @M3oM3oBug 做得太水了，之前刚学习前端时，草草做的页面，代码还是 jquery 拼接，导致我已经没办法写代码了，发 /浏览 博客的功能都被搞丢了，有时间的话可能会用 vue.min.js 全部改了。之前上面原有的 console 是可以输内容的，rm -rf / 回车就会执行 document.body.innerHTML=''把页面清空。因为这个挺好看的，所以就直接把之前的功能换掉了，感谢！！！ |
 | 11 IsaacYoung 2021-01-16 13:16:22 +08:00 666 |
 | 12 dartabe 2021-01-16 13:17:06 +08:00 喜欢 很好看 |
 | 13 roshad 2021-01-16 13:23:58 +08:00 ？黑客帝国全是日语吗？我看的时候没发现 |
14
OHyn 2021-01-16 13:26:57 +08:00 很漂亮！
| 16 M3oM3oBug OP @roshad [这个]( ) 应该是原版，前两天做这个效果的时候查了一下好像是说翻转的片假名，我就按照 x, y 随机翻转片假名了，可以 chars: ["你", "想", "要", "的", "字", "符"] 来自定义 |
 | 18 x86 2021-01-16 13:43:02 +08:00 via iPhone 1 07 年那会很多黑页都是这个 |
 | 19 revalue 2021-01-16 14:03:18 +08:00 1 万人血书火星文版 |
 | 20 cigarzh 2021-01-16 14:08:55 +08:00 不支持 Safari ？ |
 | 21 sasalemma 2021-01-16 14:14:14 +08:00 GOOD ！先藏一份 |
| 22 M3oM3oBug OP 1 |
 | 23 hantsy 2021-01-16 14:40:07 +08:00 大学时候最这个最初是用 Flash ActionScript 编程实现的。 |
 | 24 guanhui07 2021-01-16 14:40:11 +08:00 还可以 |
| 25 hantsy 2021-01-16 14:41:01 +08:00 Flash 动画还是经典的火柴人，把成龙那些招势全部加入了。 |
 | 26 Kiske 2021-01-16 14:43:23 +08:00 1 大佬, 我可以把它发布在 steam wallpaper engine 的创意工坊里吗 |
| 27 M3oM3oBug OP |
 | 28 580a388da131 2021-01-16 14:49:13 +08:00 额，为啥现在突然想起搞这个了？ 我还以为谁在挖坟。 |
 | 29 jiangfkyyy 2021-01-16 14:56:44 +08:00 6666 |
| 30 M3oM3oBug OP @580a388da131 为了给 [janvas]( https://github.com/jarenchow/janvas) 求小心心呀。。基于此高效绘制的 |
 | 31 konnnnn 2021-01-16 15:03:25 +08:00 原版是从他妻子的菜谱上随便找的 |
 | 32 ccvip 2021-01-16 15:53:27 +08:00 喜欢 |
 | 33 Kilerd 2021-01-16 16:01:50 +08:00 好家伙，吃掉了我 30% 的 CPU 资源 |
| 36 M3oM3oBug OP @Kilerd 我处理器 E3-1231v3 也是差不多，为了尽可能还原原特效： 每个 Text 都在进行矩阵变换（左右上下翻转），Text 的 Hsl 颜色饱和度和亮度都是不同的，拖尾效果是留下了一个 Text 并按照颜色的亮度决定透明度减小直到消失后复用 感觉最主要消耗时间的还是原生的 fillText 方法，这我也没法处理哈哈 其实已经很快了，谁能复现这个且比我的占用更低我拜他为师，嗑仨响头的那种 |
| 37 youla 2021-01-16 16:25:29 +08:00 |
 | 38 love 2021-01-16 16:32:35 +08:00 原版似乎要密要快，这个一开始太稀稀拉拉了没那种感觉 |
 | 39 James369 2021-01-16 16:40:01 +08:00 1.缺少三维空间感。2. 字体太圆润细腻，缺少黑客科技感。 |
 | 40 mathzhaoliang 2021-01-16 16:46:55 +08:00 1 |
 | 41 EGOISTK21 2021-01-16 16:51:57 +08:00 via iPhone 很棒，已收藏 |
| 42 dartabe 2021-01-16 16:52:35 +08:00 @mathzhaoliang 你发的这个效果比楼主的差远了 不知道你仔细看了没 |
| 44 youla 2021-01-16 16:54:27 +08:00 @mathzhaoliang 你发的这个虽然看着是比较炫酷，但是确实比楼主的差了点精致。 |
 | 45 towser 2021-01-16 16:54:47 +08:00 以前很多黑客网站首页都是这种特效，还伴随着不约而同但也不知道叫什么名的振奋音乐。 |
| 46 Kiske 2021-01-16 17:00:18 +08:00 @Hugehard 我没有验证手机号,链接直接发不出来, 用 base64 解码以下 aHR0cHM6Ly9zdGVhbWNvbW11bml0eS5jb20vc2hhcmVkZmlsZXMvZmlsZWRldGFpbHMvP2lkPTIzNjMzNTYzNzM= |
 | 47 MasterMonkey 2021-01-16 17:03:10 +08:00 via iPhone 不行，我也得造一个 |
 | 48 lifetimeporn 2021-01-16 17:13:07 +08:00 能调整速度吗？ |
| 49 M3oM3oBug OP 1 @MasterMonkey 一起玩啊造啊哈哈 @lifetimeporn coderain.js 中 `head.timespan = this.rand(50, 100, true);` 是调整速度的，随机了一个 50 到 100 之间的值，这个值代表 50~100 毫秒触发一次变动，可以用那个 [CodePen]( https://codepen.io/jarenchow/pen/rNMQpMe) 试试。 |
 | 51 whitehack 2021-01-16 17:32:09 +08:00 只有我发现这不是开源项目吗? 而且还没有 ts 定义 |
 | 52 p1gd0g 2021-01-16 18:57:39 +08:00 已经出现的字符不是不会变吗？ （我在关注些什么。。。 |
 | 53 li492135501 2021-01-16 19:20:39 +08:00 最下面的是不是堆到一起去了 |
 | 54 ETiV 2021-01-16 19:26:38 +08:00 via iPhone 想起了当年玩 Flash 的时光… |
 | 55 gkiwi 2021-01-16 19:36:54 +08:00 棒！ |
| 56 mathzhaoliang 2021-01-16 20:36:00 +08:00 |
 | 57 ysmood 2021-01-16 20:55:48 +08:00 |
 | 58 xiangbing74 2021-01-16 21:06:45 +08:00 把文字改成唐诗 300 首 我觉得可行 哈哈哈 |
| 59 hantsy 2021-01-16 21:16:51 +08:00 @M3oM3oBug 今天看到一个大新闻，大连铁路局某系统，由于新采购的电脑一些系统没有预安装 Flash，无法登录到 XX 系统，导致服务大面积 XXX 。专家连夜奋斗 XX 小时，最终找到问题所在，安装回 Flash 成功解决问题。 |
| 60 hantsy 2021-01-16 21:20:08 +08:00 黑客帝国应该重新翻拍一下，当时只是互联网刚刚兴起。 现在的题材太多 ，可以发挥的东西太多了，更有意思。 |
 | 61 pigmen 2021-01-16 21:22:33 +08:00 可不可以纯 CSS 实现 |
 | 62 nekolr 2021-01-16 21:34:08 +08:00 via Android 很棒！ |
 | 63 jackmod 2021-01-16 21:57:31 +08:00 确实超赞 |
 | 64 DylanZ 2021-01-16 22:13:50 +08:00 @M3oM3oBug 当年很多人都以为《黑客帝国》里面有日本文字的原因是因为导演华卓斯基姐妹（原来是兄弟，后来变性）喜爱日本的文化，不过最近《黑客帝国》的美术指导 Simon Whitley 说道“《黑客帝国》的瀑布文字其实是日文片假名的寿司菜单” 为什么会这样呢？根据 Simon Whitely 介绍，他的妻子是一个日本人，当年想不出什么创意，刚好发现了他妻子收藏的食谱，扫了扫他妻子的食谱之后便诞生了用这个食谱来充当黑客的瀑布流文字的特效素材。 原文址： https://kknews.cc/news/pe4vn5j.html 难度有点大哈哈 |
 | 65 IgniteWhite 2021-01-17 00:27:27 +08:00 之前我为了屏保找过很多这个效果，楼主是我见过做的最好的 |
 | 66 Augi 2021-01-17 10:52:25 +08:00 via iPhone 已 star |
 | 67 jqtmviyu 2021-01-17 15:47:01 +08:00 这不来段大悲咒[: 狗头] |
 | 68 WishMeLz 2021-01-18 10:25:16 +08:00 我大一的时候在 jq22 上面看到过这个，一模一样 |
 | 69 Desiree 2021-01-18 14:39:41 +08:00 文艺复兴 |
 | 70 ai277014717 2021-01-18 15:30:29 +08:00 感觉文字密度有点低。没有信息量爆炸的感觉 |
 | 71 amwyyyy 2021-01-18 16:29:28 +08:00 666， 能飞快点就好了 |
 | 72 zaul 2021-01-19 09:52:29 +08:00 有点东西 |
 | 73 zhuangjia 2021-01-19 09:53:01 +08:00 打开网页，F11 |
 | 74 b1ackjack 2021-01-19 10:13:09 +08:00 之前见过其他人的实现，楼主的实现也很酷，感觉楼主的字体偏亮，效果更好看 |
 | 75 yeeyeung 2021-01-19 10:17:23 +08:00 好想做成桌面啊！ |
 | 76 mlxj 2021-01-19 10:19:34 +08:00 因曲思婷 |
 | 77 MxxIsBest 2021-01-19 10:40:58 +08:00 为啥是日文符号？ |
 | 78 Ritter 2021-01-19 10:42:25 +08:00 666 |
 | 80 tachikomachann 2021-01-19 11:33:11 +08:00 via Android @roshad 这就要说到攻壳机动队了 |
 | 81 linziyanleo 2021-01-19 11:33:17 +08:00 大佬太强 666 |
 | 82 ispinfx 2021-01-19 12:22:24 +08:00 一打开我以为我要进化了 |
 | 83 xuboying 2021-01-19 12:43:40 +08:00 这个效果已经是见过的特效里算非常优秀的了，但是要 100%还原最好还能做点前后虚化效果和光晕。 |
 | 84 idealhs 2021-01-19 15:46:44 +08:00 @hantsy 你真的看过黑客帝国吗，电影跟互联网有什么关系。整部片子讨论的是真实与虚无这样一个哲学题材，别对着标题望文生义了。 |
 | 85 Lemeng 2021-01-19 15:50:38 +08:00 有点意思呢 |
 | 86 CallMeReznov 2021-01-19 16:23:29 +08:00 文艺复兴 |
 | 87 voids 2021-01-19 18:08:13 +08:00 前段时间偶然看到的.. http://lab.mkblog.cn/hacker/ |
 | 88 justNoBody 2021-01-20 15:34:15 +08:00 已收藏，准备求婚用 |
 | 89 mamumu 2021-01-22 17:40:24 +08:00 厉害 已 star |
Select Language