一个实用性很强canvas的背景,比上次的更炫一点

原创 誓约胜利之剑 教程 js 4129阅读 2016-12-03 18:03:33 举报

看到了http://luuman.github.io/Home/H1/index.html该博客的canvas背景,这个博客很有意思,屏蔽了鼠标右击,然后又给f12添加了按下关闭当前页面的事件,可惜怎么可能阻止我这颗探索的心。
上次分享过一个canvas特效,这次的效果类似,更炫酷一点,讲解一下大概思路,首先设置一个数组,用于放置所有的点,对所有的点进行随机绘制,筛选鼠标所在位置设定值半径内的所有点,遍历这些点,将其与其他在设定距离之类的相邻点进行线连接,使用定时器,重复执行该过程,就会出现这样的效果。
下次就不玩这个canvas了,分享点实用的东西,canvas虽然炫,但我工作中能用的机会毕竟太少。
html 代码

评论 ( 16 )
最新评论
15155102848 15F 2016-12-16 09:48:49 16F

多谢 查到原因了

誓约胜利之剑 14F 2016-12-16 09:36:06 15F

被其他元素挡住了

15155102848 12F 2016-12-16 08:40:57 14F

我设置-1为什么canvas会隐藏掉

1246274182 12F 2016-12-12 21:10:11 13F

谢谢了

誓约胜利之剑 11F 2016-12-12 09:33:21 12F

在网页中添加一个canvas元素,设置绝对定位,与屏幕等宽等高,z-index设置-1,这样就可以像背景一样展示出来

1246274182 2016-12-09 20:45:13 11F

问:要如何嵌入网页?

誓约胜利之剑 9F 2016-12-06 15:17:54 10F

你看下他的min默认是0,所以不会超过255的

wforlove 2016-12-06 15:05:45 9F

return Math.floor(Math.random() 255 + min); Math.random()255 是0-255,加上min 不是会超过255吗??

誓约胜利之剑 5F 2016-12-06 11:03:32 8F

我以前也是设计

誓约胜利之剑 6F 2016-12-06 11:03:13 7F

换个浏览器

zhaoyanxiansen 2016-12-06 09:22:10 6F

我怎么看不到呢····

waitTu 2F 2016-12-06 08:56:51 5F

是的啊 我就是个设计师,我工作了三年也没有遇到这种需求,哈哈

米若 2F 2016-12-05 17:05:26 4F

要是 懂 技术的 设计师

oceanliu666 2016-12-05 15:05:03 3F

大兵哥牛逼》。。。

誓约胜利之剑 1F 2016-12-05 10:40:28 2F

这样的效果,与技术的关系不大,更多的是设计思想,没有一个牛逼的设计师,再厉害的技术也展现不出来

与码共舞 2016-12-05 10:10:04 1F

啥时候我才能写出这么炫的效果了