html5 canvas 绘制的网页背景( 1.7kb)

2015-12-11 09:55:46 +08:00
 50vip

我承认之前发过类似的帖子。以下是做了很多的更新内容:

github 地址:https://github.com/hustcc/canvas-nest.js

预览地址:http://www.atool.org/

增加配置项

使用 script 属性的方式来配置:

  1. color: 线条颜色, 默认:'0,0,0' ;三个数字分别为(R,G,B),注意用,分割
  2. opacity: 线条透明度( 0~1 ), 默认: 0.5
  3. count: 线条的总数量, 默认: 150
  4. zIndex: 背景的 z-index 属性, css 属性用于控制所在层的位置, 默认: -1

配置使用如下:

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="http://github.atool.org/canvas-nest.min.js"></script>

减小代码

除了yui 在线压缩之外,还采用了一下方法:

  1. 将重复使用的比较长的系统方法,重新封装一层,比如 document.getelementsbytagname(),代码中使用了两次,如果封装一层方法,在调用,大概可以减少 0.15 的大小。

  2. 字典中的键值变短。

  3. 变量定义采用一个 var ,多个逗号分隔。

也许会说这么压缩为了啥,因为代码简短,压缩代码并不会造成很大的阅读问题。尽量减小文件大小只是一种情怀。

不喜绕行即可,别喷~

1729 次点击
所在节点    程序员
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/242735

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX