发呆页面 canvas 随机连线 数字混沌艺术

[kylebing]

闲着弄了个发呆页面：从屏幕中随机取点，连线。

https://kylebing.cn/test/animate-canvas-lost

参数说明

• @param title string 自定义点位的标题，默认为屏幕坐标值
• @param titleFontSize number 标题文字大小
• @param isShowLine number 1 画线 0 不画线
• @param isShowTitle number 1 显示标题 0 不显示标题
• @param lineWidth number 线条宽度 默认：2
• @param bgColor string 背景颜色 RGB 等颜色格式均可

这些参数都可以直接在浏览器地址栏的参数中使用

以下是一些例子

https://kylebing.cn/test/animate-canvas-lost/?isShowLine=1&titleFontSize=50&lineWidth=10&isShowTitle=0

千千万万个我 https://kylebing.cn/test/animate-canvas-lost/?isShowLine=0&titleFontSize=50&lineWidth=10&isShowTitle=1&bgColor=black&title=%E6%88%91

https://kylebing.cn/test/animate-canvas-lost/

https://kylebing.cn/test/animate-canvas-lost/?isShowLine=0&titleFontSize=50&lineWidth=10&isShowTitle=1&bgColor=black&title=+++

https://kylebing.cn/test/animate-canvas-lost/?isShowLine=0&titleFontSize=50&lineWidth=10&isShowTitle=1&bgColor=black&title=HelloWorld

https://kylebing.cn/test/animate-heart-canvas/?hMin=0&hMax=360&countHeart=500&sizeMin=10&sizeMax=50&bgColor=%233d3d3d

笑死我了，好像蜘蛛在拉网

https://kylebing.cn/test/animate-canvas-lost/?title=%F0%9F%95%B7%EF%B8%8F&titleFontSize=50

又好像小人被蜘蛛绑了

https://kylebing.cn/test/animate-canvas-lost/?title=%F0%9F%98%86&titleFontSize=50

https://kylebing.cn/test/animate-canvas-lost/?isShowLine=1&titleFontSize=50&lineWidth=25&isShowTitle=0

近视的打开这个，把屏幕全屏，然后把眼镜摘下来盯着看，挺有意思的

[vitovan]

非常好，应该加个背景音乐。

[vitovan]

给你做了个极其智障的背景音乐：

https://transfer.sh/ef4hhpvVfb/jatahohey.wav

[goodryb]

太快了反而显得有点杂乱

或者可以把速度降低的很慢，5s 一根

[FreeEx]

很有创意

[ql562482472]

好 真不错

[ql562482472]

@vitovan #2 这音乐也不错 好

[Livid]

想起来了以前 Windows 95 时代的屏保。

[Livid]

换成 emoji 的效果，然后全屏，真的可以当屏保用了：

[kylebing]

@Livid #8 我是放笑脸😆，你这放粑粑就有点过分了，把字体放大点会更好。

[Martens]

反馈一个问题，mac 系统上浏览器全屏时，鼠标移动到最上面显示系统状态栏会重新画

[kile]

太快了,建议能配置时间

[kylebing]

@Martens #10 应该是触发了屏幕尺寸变化的事件了。我是听的那个事件。

[registerrr]

本来想说可以再进一步延伸延伸, 看似散乱的线最后能生成一个画像的轮廓, 搜了下居然真的有人已经做过了
https://halfmonty.github.io/StringArtGenerator/

[uiosun]

Cool!

[zhumengyang]

nb

[Akitora]

如果能接入 twitter stream api 的话，可以打印来自世界各地的实时推文，那样感觉还挺有意思的

可惜马应龙把这功能收费了

[hu1e]

挺有意思的，不过打开页面放几个小时我 cpu 是不是会炸

[296727]

写的很好，但是已经被我 down 到本地，魔改了

[296727]

@hu1e 按照道理来说应该不会，相当于一直在 windows 画板上画画

[dj721xHiAvbL11n0]

我眼睛瞎了，快赔钱

[hu1e]

@296727 后面肯定会炸的，每一帧都是实时渲染的，而且不停歇

[hu1e]

@296727 如果每隔一段时间生成当前画面的快照，后面直接通过 drawImage 之前的图片，那样应该就还行

[tyrone2333]

一直渲染会内存溢出吗

[kylebing]

@tyrone2333 #23 不会，没有内存占用，就是在一张 canvas 上一直画，画面也没有切换。

[kylebing]

@registerrr #13 好东西

[kylebing]

@hu1e #17 不会，没有内存占用，就是在一张 canvas 上一直画，画面也没有切换。

[leadfast]

送你个 star

[joyce95]

这好像是我从小就会做的一个噩梦。有一些几何的东西在空间里无限膨胀，但是无能为力。

[liu10240]

挺好玩的

[wann]

有意思的，但是作为一个干眼症患者，你不如让我去死，闪瞎我拉！

[lilei2023]

看的我头晕目眩的！

[LeeReamond]

老哥，建议专门面向屏保设计一个，就比较有实用性了。图案针对屏保专门优化一下，然后优化性能，加一行代码点进去以后自动全屏之类的。

[kokdemo]

挺有意思的，好玩

[cooper2020]

有趣的页面

[w88975]

@hu1e canvas 如果不去管理虚拟 node 的话，本身就是每次覆盖上一次的绘制，所以不存在内存 CPU 要炸的情况

[shui14]

以前做过抽取 bing n 张壁纸做特征分组，然后按照 emoji 给人群分组，同一个 group 可以按 j ，玩过 cs 的应该知道按 j 是什么
因为拓扑组是动态的，所以上一轮你嘲讽别人下一轮也被嘲讽

[XieBoCai]

做成屏保就牛逼了，是不是可以让文字随机旋转一定角度？

[codehz]

能不能考虑增加个不同色彩模型的随机颜色（比如 HSV 里固定明度，改色相和饱和度

[chaoschick]

https://alcyonides.gitee.io/blog/mic-anims 可以根据声音的频率脉动

[QingquanBaby]

@chaoschick 小孩喜欢这个，突然想起来了那种老式的长方条，声音大了变高

[dioxide]

有意思, 如果能加入系统的音频信号作为输入源,实现可视化. 就更 cool 了

[dioxide]

建议, 加入和鼠标的互动, 更有可玩性

[maxssy]

请问附言是怎么发的? 为啥我创建的主题没找到哪里能发附言吖?

[kylebing]

@maxssy #43 一段时间之后才能附言，刚开始是可以直接修改的