|
【ixhao】给网页添加一个基于canvas绘制的背景效果[复制链接]
一个非常不错的网页背景效果,跟随鼠标变幻的动态线条,一个基于canvas绘制的网页背景效果。
演示截图:
特点:
1、不依赖任何框架或者内库,如不依赖 jQuery;
2、使用原生的 javascript,只有1.6 kb,如果开启 gzip,可以更小;
3、使用外链非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。
回复看代码,我们拒绝伸手党
JS代码如下:
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x |
|