切换风格

默认晚霞 雪山 粉色心情 伦敦 花卉 绿野仙踪 加州 白云 星空 薰衣草 城市 简约黑色 简约米色 龙珠
回复 0

3882

主题

3884

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
12918
【ixhao】给网页添加一个基于canvas绘制的背景效果[复制链接]
发表于 2022-4-7 21:30:37 | 显示全部楼层 |阅读模式
一个非常不错的网页背景效果,跟随鼠标变幻的动态线条,一个基于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
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|不懂 ( 粤ICP备14042591号-1 )|网站地图

GMT+8, 2024-11-22 11:56 , Processed in 0.096400 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

返回顶部