演示地址 CodePen 此示例可以轻易自定义各种参数，或者嵌入自己的网站。
虽然我现在做前端 Web 开发，但是做页面或业务还是及不上自己创造的感觉，所以在一段努力之后创造了基于 HTML5 Canvas 2d 的开发框架 janvas。
在此基础上开发了一些示例的代码：janvasexamples
目前在考虑想接需求，或者大家有推荐的好点的做内容输出的网站吗，比如 CSDN 一类的。
顺便可不可以求一点小心心。
爱意满满的作品展示区。
This topic created in 2126 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jan 19, 2021
没想到得到这么多关注。。
@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 尝试一下
 |
beimenjunJan 16, 2021
1
感觉挺有趣的
|
 |
oubfgiarJan 16, 2021 via iPhone
2
喜欢
|
 |
ijrouJan 16, 2021
3
挺有意思的~~
|
 |
4
sixsixsix
|
1 |
youlaJan 16, 2021
5
我想放在我的博客园里。
|
 |
wdytoyaJan 16, 2021
6
牛逼
|
|
7
博客园加入了~~嘻嘻，博客园的代码乱糟糟的，也没时间整理，加上去毫无违和感~ https://www.cnblogs.com/iamverylovely
|
|
youlaJan 16, 2021
10
@M3oM3oBug 做得太水了，之前刚学习前端时，草草做的页面，代码还是 jquery 拼接，导致我已经没办法写代码了，发 /浏览 博客的功能都被搞丢了，有时间的话可能会用 vue.min.js 全部改了。之前上面原有的 console 是可以输内容的，rm -rf / 回车就会执行 document.body.innerHTML=''把页面清空。因为这个挺好看的，所以就直接把之前的功能换掉了，感谢！！！
|
 |
IsaacYoungJan 16, 2021
11
666
|
 |
dartabeJan 16, 2021
12
喜欢 很好看
|
 |
roshadJan 16, 2021
13
？黑客帝国全是日语吗？我看的时候没发现
|
 |
OHynJan 16, 2021
14
很漂亮！
|
 |
16
@roshad [这个]( ) 应该是原版，前两天做这个效果的时候查了一下好像是说翻转的片假名，我就按照 x, y 随机翻转片假名了，可以 chars: ["你", "想", "要", "的", "字", "符"] 来自定义
|
 |
18
07 年那会很多黑页都是这个
|
 |
19
万人血书火星文版
|
 |
cigarzhJan 16, 2021
20
不支持 Safari ？
|
 |
sasalemmaJan 16, 2021
21
GOOD ！先藏一份
|
|
22
|
 |
hantsyJan 16, 2021
23
大学时候最这个最初是用 Flash ActionScript 编程实现的。
|
 |
guanhui07Jan 16, 2021
24
还可以
|
|
hantsyJan 16, 2021
25
Flash 动画还是经典的火柴人，把成龙那些招势全部加入了。
|
 |
26
大佬, 我可以把它发布在 steam wallpaper engine 的创意工坊里吗
|
|
27
|
 |
580a388da131Jan 16, 2021
28
额，为啥现在突然想起搞这个了？
我还以为谁在挖坟。 |
 |
jiangfkyyyJan 16, 2021
29
6666
|
|
30
@580a388da131 为了给 [janvas]( https://github.com/jarenchow/janvas) 求小心心呀。。基于此高效绘制的
|
 |
konnnnnJan 16, 2021
31
原版是从他妻子的菜谱上随便找的
|
 |
ccvipJan 16, 2021
32
喜欢
|
 |
KilerdJan 16, 2021
33
好家伙，吃掉了我 30% 的 CPU 资源
|
|
36
@Kilerd 我处理器 E3-1231v3 也是差不多，为了尽可能还原原特效：
每个 Text 都在进行矩阵变换（左右上下翻转），Text 的 Hsl 颜色饱和度和亮度都是不同的，拖尾效果是留下了一个 Text 并按照颜色的亮度决定透明度减小直到消失后复用 感觉最主要消耗时间的还是原生的 fillText 方法，这我也没法处理哈哈 其实已经很快了，谁能复现这个且比我的占用更低我拜他为师，嗑仨响头的那种 |
|
youlaJan 16, 2021
37
|
 |
loveJan 16, 2021
38
原版似乎要密要快，这个一开始太稀稀拉拉了没那种感觉
|
 |
James369Jan 16, 2021
39
1.缺少三维空间感。2. 字体太圆润细腻，缺少黑客科技感。
|
 |
40
|
 |
EGOISTK21Jan 16, 2021 via iPhone
41
很棒，已收藏
|
|
dartabeJan 16, 2021
42
@mathzhaoliang 你发的这个效果比楼主的差远了 不知道你仔细看了没
|
|
youlaJan 16, 2021
44
@mathzhaoliang 你发的这个虽然看着是比较炫酷，但是确实比楼主的差了点精致。
|
 |
towserJan 16, 2021
45
以前很多黑客网站首页都是这种特效，还伴随着不约而同但也不知道叫什么名的振奋音乐。
|
|
KiskeJan 16, 2021
46
@Hugehard 我没有验证手机号,链接直接发不出来, 用 base64 解码以下
aHR0cHM6Ly9zdGVhbWNvbW11bml0eS5jb20vc2hhcmVkZmlsZXMvZmlsZWRldGFpbHMvP2lkPTIzNjMzNTYzNzM= |
 |
MasterMonkeyJan 16, 2021 via iPhone
47
不行，我也得造一个
|
 |
lifetimepornJan 16, 2021
48
能调整速度吗？
|
|
49
@MasterMonkey 一起玩啊造啊哈哈
@lifetimeporn coderain.js 中 `head.timespan = this.rand(50, 100, true);` 是调整速度的，随机了一个 50 到 100 之间的值，这个值代表 50~100 毫秒触发一次变动，可以用那个 [CodePen]( https://codepen.io/jarenchow/pen/rNMQpMe) 试试。 |
 |
whitehackJan 16, 2021
51
只有我发现这不是开源项目吗? 而且还没有 ts 定义
|
 |
p1gd0gJan 16, 2021
52
已经出现的字符不是不会变吗？
（我在关注些什么。。。 |
 |
li492135501Jan 16, 2021
53
最下面的是不是堆到一起去了
|
 |
ETiVJan 16, 2021 via iPhone
54
想起了当年玩 Flash 的时光…
|
 |
gkiwiJan 16, 2021
55
棒！
|
|
mathzhaoliangJan 16, 2021
56
|
 |
ysmoodJan 16, 2021
57
|
 |
xiangbing74Jan 16, 2021
58
把文字改成唐诗 300 首 我觉得可行 哈哈哈
|
|
hantsyJan 16, 2021
59
@M3oM3oBug 今天看到一个大新闻，大连铁路局某系统，由于新采购的电脑一些系统没有预安装 Flash，无法登录到 XX 系统，导致服务大面积 XXX 。专家连夜奋斗 XX 小时，最终找到问题所在，安装回 Flash 成功解决问题。
|
|
hantsyJan 16, 2021
60
黑客帝国应该重新翻拍一下，当时只是互联网刚刚兴起。
现在的题材太多 ，可以发挥的东西太多了，更有意思。 |
 |
pigmenJan 16, 2021
61
可不可以纯 CSS 实现
|
 |
nekolrJan 16, 2021 via Android
62
很棒！
|
 |
jackmodJan 16, 2021
63
确实超赞
|
 |
DylanZJan 16, 2021
64
@M3oM3oBug 当年很多人都以为《黑客帝国》里面有日本文字的原因是因为导演华卓斯基姐妹（原来是兄弟，后来变性）喜爱日本的文化，不过最近《黑客帝国》的美术指导 Simon Whitley 说道“《黑客帝国》的瀑布文字其实是日文片假名的寿司菜单”
为什么会这样呢？根据 Simon Whitely 介绍，他的妻子是一个日本人，当年想不出什么创意，刚好发现了他妻子收藏的食谱，扫了扫他妻子的食谱之后便诞生了用这个食谱来充当黑客的瀑布流文字的特效素材。 原文網址： https://kknews.cc/news/pe4vn5j.html 难度有点大哈哈 |
 |
FurN1Jan 17, 2021
65
之前我为了屏保找过很多这个效果，楼主是我见过做的最好的
|
 |
AugiJan 17, 2021 via iPhone
66
已 star
|
 |
jqtmviyuJan 17, 2021
67
这不来段大悲咒[: 狗头]
|
 |
WishMeLzJan 18, 2021
68
我大一的时候在 jq22 上面看到过这个，一模一样
|
 |
DesireeJan 18, 2021
69
文艺复兴
|
 |
ai277014717Jan 18, 2021
70
感觉文字密度有点低。没有信息量爆炸的感觉
|
 |
amwyyyyJan 18, 2021
71
666， 能飞快点就好了
|
 |
zaulJan 19, 2021
72
有点东西
|
 |
zhuangjiaJan 19, 2021
73
打开网页，F11
|
 |
b1ackjackJan 19, 2021
74
之前见过其他人的实现，楼主的实现也很酷，感觉楼主的字体偏亮，效果更好看
|
 |
yeeyeungJan 19, 2021
75
好想做成桌面啊！
|
 |
mlxjJan 19, 2021
76
因曲思婷
|
 |
MxxIsBestJan 19, 2021
77
为啥是日文符号？
|
 |
RitterJan 19, 2021
78
666
|
 |
tachikomachannJan 19, 2021 via Android
80
@roshad 这就要说到攻壳机动队了😁
|
 |
maomaoxiaoJan 19, 2021
81
大佬太强 666
|
 |
ispinfxJan 19, 2021
82
一打开我以为我要进化了
|
 |
xuboyingJan 19, 2021
83
这个效果已经是见过的特效里算非常优秀的了，但是要 100%还原最好还能做点前后虚化效果和光晕。
|
 |
LemengJan 19, 2021
85
有点意思呢
|
 |
CallMeReznovJan 19, 2021
86
文艺复兴
|
 |
voidsJan 19, 2021
87
前段时间偶然看到的.. http://lab.mkblog.cn/hacker/
|
 |
justNoBodyJan 20, 2021
88
已收藏，准备求婚用😁
|
 |
mamumuJan 22, 2021
89
厉害 已 star
|
Select Language