爱意满满的作品展示区。

This topic created in 3808 days ago, the information mentioned may be changed or developed.

今天在某网站上发现的，看到 github 上没有，就开源出来了。项目地址见： https://github.com/hustcc/canvas-nest.js

如果代码侵犯了你的版权，请联系我删除，谢谢。

具体效果直接看地址： http://www.atool.org/

screenshot

或者直接下载 github 项目，看其中的 demo 。使用和配置非常简单， js 代码也非常少， 2kb 不到。下面的 readme 文件内容。

cavas-nest.js

A nest backgroud of website draw on cavas.

feature

do not depend on jQuery or other javascript framework.
very light, only 1.59kb. can be smaller after gzip.
so easy to use, even you are not a web developer.

usage

so eazy that I do not want write the chapter.

<script type="text/javascript" src="canvas-nest.js"></script>

then ok!

preview

OnlineTool: http://www.atool.org/

if you has used this project, pls let me know, I can add your website on.

other

the code is from other website, is not writed by myself. I just do some code on it.
I search the github, but can not find the code.
if the code is piracy of yours, pls let me know.

Supplement 1 · Dec 8, 2015

附加一下：原始代码来自于不知道什么网站，该网站有一个区域有这个效果，并且代码并没有署名和版权说明，个人保存之后，经过比较多的修改，不说面目全非，至少原作者是认不出看来了。这种情况有版权问题吗？如果这个也有版权问题的话，会不会我们在网络上抄写的 for 循环语句，排序代码也是有版权问题？

Supplement 2 · Dec 8, 2015

不要 tm 矫枉过正的说版权问题，素质问题，真没有素质什么的，我特码几个网站被别人全站抄袭，完全镜像，跟他们联系，它们要么说不删、要么说去尼玛、要么说去报警吧。。。

所以看到下面回复版权问题、 github 还可以这么用，真没有素质等等，我就想说醉了，哪个开发人员没有复制过网络上的代码，然后进行一层封装，变得更好用。

我也不例外， copy 了网上的代码并且进行大量封装然后做成大家都能很简单用的方式，很多开源项目不都是这样的吗？？用现有的东西做出给大家使用起来方便的代码。

醉了。。。

Supplement 3 · Dec 8, 2015

一边说版权问题，一边赶紧 star 和 fork ，我也是够了~

Supplement 4 · Dec 9, 2015

增加 cdn 地址：<script type="text/javascript" src="//github.atool.org/canvas-nest.min.js"></script>

加到<body>内即可。

Supplement 5 · Dec 10, 2015

增加几个配置项，方便用户自定义，同时依然不改变部署的方式。 https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md

Supplement 6 · Jan 19, 2016

wordpress 用户有福了，插件地址： https://github.com/aTool-org/canvas-nest-for-wp

97 replies • 2018-08-10 14:14:17 +08:00

pupboss

Dec 7, 2015

翻译水平 = =

50vip

Dec 7, 2015

@pupboss 哈哈，因为太差，求修改后 pr~

hardware

Dec 7, 2015

请标明出处。。。

50vip

Dec 7, 2015

@hardware 标哪里？

hardware

Dec 7, 2015

@50vip 你不是从别的地方抄来的么？

phoenixlzx

Dec 7, 2015

这是 domaintools 的 whois 工具背景效果么...

litianyou

Dec 7, 2015

@phoenixlzx 看起来有些相同，但是有些不一样..

50vip

Dec 7, 2015

@hardware
@litianyou 不是的~

twor2

Dec 7, 2015

东西很赞很好，但在这个页面上效果很不好

zangbob

Dec 7, 2015

楼主网站上作品都不错，但这个背景用了之后眼晕。。。

6IbA2bj5ip3tK49j

Dec 7, 2015

这代码不是你的，你这样“开源”不厚道吧。

ztrt

Dec 7, 2015

部分手机浏览器浏览时会变卡

50vip

Dec 7, 2015

@xgfan 确实不太好，求原始作者过来，我修该了一点东西，部署更简单。
不过说实话，互联网导出都是抄袭，更别说 js 代码了~

qiayue

PRO

Dec 7, 2015

楼主你没说清楚啊，你是别处看到这样的效果，然后自己用代码实现了，然后开源
还是把别人的代码给开源了？

renxiangbin

Dec 7, 2015

记得知乎上有用过。

50vip

Dec 7, 2015

@qiayue 别人的代码，自己改了改，然后用上了，开源了。。。关键是我找不到之前从那个网站看到的代码了。当时搜索一个东西，到一个网站，然后看到效果不错，就把 js 保存下来了。活做完了就忘记了，今天中文发现那个 js 文件，就折腾了一下开源了

50vip

Dec 7, 2015

@ztrt 可能有很多的绘图操作吧~

paloalto

Dec 7, 2015

分享另一个类似的 repo ： https://github.com/VincentGarreau/particles.js

50vip

Dec 7, 2015

@paloalto 确实很像，不过那个 js 压缩之后 22k ，太大了~~~这个是绘制星座？碉堡了

50vip

Dec 7, 2015

@paloalto 好像不太一样，不能鼠标连起一个圈来~

paloalto

Dec 7, 2015

@50vip 可以设置的。

ericshine

Dec 7, 2015

楼主可以标注一下出处，来自网站。

50vip

Dec 7, 2015

@ericshine 好的好的~

iyaozhen

Dec 7, 2015

非常敬佩的一个学长的，现美团前端大牛。

iyaozhen

Dec 7, 2015

@iyaozhen http://blog.ysmood.org/ 类似的效果

learnshare

Dec 7, 2015

看到其他地方有，就拿到 Github 开源了？

这样真的合适么

50vip

Dec 7, 2015

@learnshare 看楼上各种回复，各种类似的，谁知道我看到的那个代码是不是也是从各种地方抄过来的呢，另外，很多大网站的网站前段效果，其实也是网上各种抄过来的。

我说上面的不是否定我这样做不好，我自己也觉得不好，所以在 readme.md 文件中有所说明。请仔细看~

50vip

Dec 7, 2015

@iyaozhen 好像打不开，这个效果是你那个学长做的吗？

iyaozhen

Dec 7, 2015

@50vip 请扶墙，是他自己做的。:D

hardware

Dec 7, 2015

@50vip 不标明出处就是不好，别人或许也没打算开源，只是没把代码藏起来而已

hyuwang

Dec 7, 2015

楼下停了辆车。。反正也没锁主人也不在，重新喷了个漆开走了。。。你说主人来找我就把他开回去
初衷虽好虽然有侵删但还是。。
参考罗辑思维在 v2 被黑的时候

50vip

Dec 7, 2015

@iyaozhen 公司默认翻墙了，还是打不开~ *-*

50vip

Dec 7, 2015

@hardware 是的，不好~那我删除？

50vip

Dec 7, 2015

@hyuwang 那我删除 github ？额~~~

iyaozhen

Dec 7, 2015

@50vip 额，看来你梯子不行呀。

50vip

Dec 7, 2015

@iyaozhen ...

50vip

Dec 7, 2015

@iyaozhen 打开了，他这个更牛逼啊，类似于一种时间轴，还有节点文字描述，好牛逼~

50vip

Dec 7, 2015

@iyaozhen http://blog.ysmood.org/ 推荐给大家，这个有时间轴文字，但是没有鼠标收集的东东。。。

virusdefender

Dec 7, 2015

和 leancloud 首页样式差不多，那个好像是开源的

50vip

Dec 7, 2015

@virusdefender 我还以为找到原始版本了。。。我打开看了一下，不一样啊啊啊啊啊~~~~

heiybb

Dec 7, 2015

@50vip 好棒的效果 0_0 满满的科技感

Slienc7

Dec 7, 2015

这样真的很不好

PublicID

Dec 7, 2015

典型的强盗逻辑，没想到这里还有这种奇葩。
别人抄是你抄别人的理由？你偷小偷的东西不算偷？

还给别人的代码加了个 MIT license ，简直无语了。

POPOEVER

Dec 7, 2015

原来 Github 可以这样用啊

jsplyy

Dec 7, 2015

为啥我的加了没卵用 www.lujingsai.cn

50vip

Dec 8, 2015 via iPhone

@PublicID 好，我删除代码了…

50vip

Dec 8, 2015 via iPhone

@PublicID 见 atool.org ， tool.diannao.wang ，对方还是企业站…

50vip

Dec 8, 2015 via iPhone

@hardware 请搞清楚，不是抄袭…妈蛋，国内人现在就是矫枉过正，我他妈这一个 a=b 需要版权？再说别人没有标注版权咋办？

50vip

Dec 8, 2015 via iPhone

我如果不发出 github 地址，而是只贴出效果图，然后需要的留邮箱，会不会就没有那么多 bb 的？可见版权保护只是形式而已…项目不删除了…

yangff

Dec 8, 2015 via Android

@50vip 如果是伯尔尼公约签署国，而且没有其他更苛刻的限制，等他死后 50 年。

LWXYFER

Dec 8, 2015

我好累！出处在此： https://github.com/VincentGarreau/particles.js 楼主可以删 repo 了。

shuson

Dec 8, 2015

楼主是个妹子？

50vip

Dec 8, 2015

@LWXYFER 这个地址，上面的朋友已经发过了，完全不一样~代码都不一样的~

50vip

Dec 8, 2015

@shuson 和这个有啥关系？

shuson

Dec 8, 2015

@50vip 我就是歪个楼，他们太严肃了

50vip

Dec 8, 2015

@shuson 本来自己还觉得有点过意不去的，准备删除，看他们的样子，我就觉得很不爽，哪个开发人员没有复制过网络上的代码，然后进行一层封装，变得更好用。我也不例外， copy 了网上的代码并且进行大量封装然后做成大家都能很简单用的方式，很多开源项目不都是这样的吗？？

何况这才几行代码，估计还没有一个快排算法多，非要我手敲一遍，然后大言不惭说这个代码是我写的，估计下面就回复大牛。。。

我只是说明这个代码是我写的，但是不全是，部分代码来源于网络，然后就被人 bb ，草，醉了

zjf

Dec 8, 2015

...不一会就变成这么多了..

shuson

Dec 8, 2015

@50vip v 站是个好地方，希望你不要因噎废食。沉了沉了

feather12315

Dec 8, 2015 via Android

@50vip 自己开心就好，不必纠结

bhqt

Dec 8, 2015

一群大义凌然的东西。唉，何必！

jeremaihloo

Dec 8, 2015

其实我想说不必置气，有些人就那样（坛子），习惯就好

yetone

Dec 8, 2015

@shuson 楼主并不是妹子，他的头像： https://www.google.com/search?tbs=sbi:AMhZZitQMqq0MT9ktJOLR0tj-JehzJGdHCHj-rmf_1k1MCukgevkc9mVOWtQeqT60HQ-VRjBRlq0D8wFCdH7LqHbSa6UA2NADNqJN2RZ3r6rWNxKF4W3zouWVyEhOePZBbnEbKcyeiVvKo322zH-1GrinFlKA-wUe7cr-vKs_1jw4zjpGHWjD5NwPU91n0V3Yp8noz-WT8WKDxk8CcMNJspy0xxre1xS9NoCdF5In3yxlruUGx7YN3U0N_1X5dwpkb9ybISGsJx56XKuoeob2GcuQDQlfoSV6xp866CCci5tIqn2ovsI6vpnJ1gJMly-s7UbP93tZjKfJX6G96jAvQ9d41c8f59cOX_1hSWOpL4HkHMIic4bbOn7SpUsT1Y1H8HImY7ZpLVekr49FbXYhjGUKsh2_1tb9drMWOxVyOeoUAy3MI9BFxqdnzEpNXLxLsGy_1KRuy2I4JrCxp_1uMR6Sg1Dod2x7b9fO6P9B_1iKWtnGs3O1bNU3-05bMx1wykSbAlxM8yObL8txpcatZfmdOcQ4AzygW6VhKqx7CvfpP4rRDX5Ip3hki-K3Du7GOc8OQC08oX4MGzGa3_1IZmr3alvk3UJLlhDHdk41POqYeWV_1rCtHqE057MFlydBW1m-jKMvE08PHET0a4Y6yQT6KlaMm-QdkWdO7HyHWmHM6N2uA7ubHijbjcaryvvuVH7A_1ifodz6ANDMRVl5VxrkeR_1faW5_1mSzqVQnyLyeref5ExzWRNpYWOyOtSc4449xEG483QE0niKnsokIyjsVXCX0ilrdc_13KxpjodhZo5UCHr-GyOWA367bVtzdSl8KAtxkxL7UFF3cg2vQK4ElN-r8chKPkx2MepEzj4Y4-qXTgKEsRgICHNzCJf-e5Vbgk1WyumaZA40W-oofbtmwiUvJ8fDkX5tLNezRYrhzLEP05KJ08HolzVvgP7u7TlgA20qkNOnF6b6jlGxQP6gQ407ua-aPLoG4u2OaxbAjfapvHelQyUtUdZQECtGwpAlkyNbJq4CpRnbdoi6rArEigyWtHAIjPu9szIecBIE_1TZHqnxq-jc_1OQiSzccyOH4RChY-yPTIJ5wOjr9ZIZXjGnSXbZ9fXLLH2z_1CcXzWazVkGnxbNs3CvY3lnWBrnUZJ22dwHT9AybWu-LZjQsQ9YLhqrc3QxcfJHIFa37dMcccyl1qJ2vkdBOIuCio4Ravxh5ip2_1SWh6yhnhg_1u9sSyFUtRD99eaUuKkDzMvb9EjUPToxHYSiwVfRXYAgiIn4j8RkgCpPbF_1RuHyQ_1dOnL6fSe1ODLaxif8if18462fkzHbUQvZJxY2yOnnB9LKK77FzoETEFiZanVJmUZUDKUKBrG-DZKmylVWngoQYcheHToyaQAon0JujDAQ6ctaRqjTPNVd-3ncq3v5CF_1HXWmy

50vip

Dec 8, 2015

@jsplyy 不要加到 header 里面，加到 body 之间，建议在</body>上面~

50vip

Dec 8, 2015

沉了吧，沉了吧，有问题，可以私信或 github ，很高兴能解决你们的问题~

zongwan

Dec 8, 2015

Flash ActionScript 3.0 动画教程 (豆瓣)
https://book.douban.com/subject/3016575/

最早看到这个效果是 2008 年出版的教 flash ActionScript 的神书
http://i12.tietuku.com/882d03d2fd0678ec.png

@50vip 这效果早在 AS3 中出现很多次了 , 没有什么源码问题

unknownservice

Dec 8, 2015

看来政治正确这股风已经从知乎吹到 v2 了，呵呵。

frozenshadow

Dec 8, 2015

@50vip 楼主，我来请教下
```
window.onmousemove = function(a) {
a = a || window.event, w.x = a.clientX, w.y = a.clientY
}, window.onmouseout = function(a) {
w.x = null, w.y = null
};
```
这段改成 touch 事件怎么做啊。顺便问下 window.onmouseout 前面为什么是逗号~~~新手，见谅~

killerv

Dec 8, 2015

怎么那么多圣母，难道你们没有复制过网上的代码？

AnyOfYou

Dec 8, 2015

很早之前 Livid 发过一个帖子， http://v2ex.com/t/213826 。
其中所说的 KPCB 网站的效果和你这个比较接近。如今网站已将这个效果去掉了。
从帖子下的回复可以看到，使用类似效果的网站还有很多。比如 http://dotamax.com/login/， https://rocket.chat ， http://polande.com/demo/points/。

没有版权说明的代码就属于保留全部版权，可以借鉴，不可拿来直接用。你最好还是能注明下当初来源自哪里。程序员本身就靠代码吃饭，对于版权问题就应该很重视。

hardware

Dec 8, 2015

就提醒 lz 一句要表明出处，就被喷了，真心无语。

bngzoo

Dec 8, 2015

圣母 X 道德 X 无处不在。

50vip

Dec 8, 2015

@hardware 不好意思，我看到那么多说版权的，情绪没有控制好，所以殃及池鱼，不好意思，但是我觉得真心没有版权问题，我改了非常非常多的东西，但是因为效果不是自己设计出来的，所以在分享这个的时候，加了一句来源于某网站（不记得名字），结果被这样说版本，很不爽。

50vip

Dec 8, 2015

@AnyOfYou 我觉得真心没有版权问题，我改了非常非常多的东西，但是因为效果不是自己设计出来的，所以在分享这个的时候，加了一句来源于某网站（不记得名字），结果被这样说版本，很不爽。

50vip

Dec 8, 2015

@frozenshadow 连续定义变脸，都是逗号啊，可以减少 var ，减少大小

50vip

Dec 8, 2015

@AnyOfYou 另外，不知道你走过申请过专利流程没，一个专利都有专利点，一段代码怎么可能没句都是版权？

50vip

Dec 8, 2015

@AnyOfYou 专利可以相似，效果可以相似，但是代码不一样，如果只是相似就定位版权问题，那不是太打击创造积极性了吗~~~

真心希望赶紧沉掉~~

atan

Dec 8, 2015

LZ 上面不是说了，之前从哪来的也没记住，而且那个网站也未必是出处，请问这个出处如何找？如何标明？

Vladimir

Dec 8, 2015

你要开源好歹也改改源码啊，一看就是别人压缩过的你拿来格式化了一下就放上去。

AnyOfYou

Dec 8, 2015

@50vip 我并没说你的版权有问题，只是说你最好注明一下。只是看上面一堆说“圣母，政治正确”的，想说作为程序员，对于版权这种事就该严谨一些。
“没有版权说明的代码就属于保留全部版权，可以借鉴，不可拿来直接用”，这话不是我说的，出自这里： http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html