V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
50vip
V2EX  ›  程序员

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

  •  
  •   50vip · 2015-12-11 09:55:46 +08:00 · 1725 次点击
    这是一个创建于 3271 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    screenshot

    增加配置项

    使用 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 ,多个逗号分隔。

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

    不喜绕行即可,别喷~

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2601 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 15:33 · PVG 23:33 · LAX 07:33 · JFK 10:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.