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