12 2013 档案
摘要：保存和恢复状态save()restore()save和restore用于保存和恢复画布状态，画布状态是画布当前所有样式、transformation、当前clipping path的一个快照。画布状态保存在stack中，每次调用save时，当前状态将会被压入栈中，调用restore时恢复最近一次压入栈中的状态。在使用transformation函数时，先执行save，完成操作之后调用restore能减轻操作负担。translate(x, y)用于将画布的原点移动到当前当前的x，y处rotate(angle)将画布沿着顺时针，旋转angle弧度scale(xScale, yScale)在当前尺度
阅读全文
摘要：left, left,left 1 #wrapper { 2 margin-left: 400px; 3 float: left; 4 } 5 #navigation { 6 width: 200px; 7 float: left; 8 margin-left: -100%; 9 }10 #extra {11 width: 200px;12 float: left;13 margin-left: -100%;14 position: relative;15 left: 200px;16 }17 #footer {18 clear: both;19 }...
阅读全文
摘要：在本机编写canvas小程序时，引用了本地的图像。当使用canvas.toDataURL()获取canvas图像是chrome报错这是因为在本地文件系统中访问图片时，chrome会限制同源策略，解决办法把代码放到服务器上，通过网络访问设置chrome，取消同源限制，方法有多种，首先要关闭已经打开的chrome浏览器命令行进入到chrome.exe目录，通过命令行启动chrome并传递命令行参数：chrome --disable-web-security第二种方法是选中chrome.exe右键：创建快捷方式，选中快捷方式，右键：属性，点击快捷方式选项卡，找到目标栏，在后面添加-args -dis
阅读全文
摘要：right,right,right 1 #wrapper { 2 float: right; 3 margin-left: 400px; 4 } 5 #navigation { 6 float: right; 7 width: 200px; 8 margin-right: -400px; 9 }10 #extra {11 float: right;12 width: 200px;13 margin-right: -200px;14 }15 #footer {16 clear: both;17 }right,right,left 1 #wrapper { 2 ...
阅读全文
摘要：全部float向左 1 #wrapper { 2 float: left; 3 width:100%; 4 } 5 #content { 6 margin-right: 400px; 7 } 8 #navigation { 9 width: 200px;10 float: left;11 margin-left: -200px;12 }13 #extra {14 width: 200px;15 float: left;16 margin-left: -400px;17 }18 #footer {19 clear: both;20 }left,left, ...
阅读全文
摘要：width和height原理类似。这里全部使用height举例注意：如果产生滚动条。滚动条将出现在border与padding之间，消耗的是内容区的大小。margin、border、padding不受影响获取尺寸：根据目的不同通常有一下几种方法获取heightoffsetHeight： 获取包括可见内容区、滚动条、内边距、边界之和的高度，这个值与getBoundingClientRect()返回对象中的height相同。scrollHeight: 获取显示全部内容需要的高度加上上下padding，也就是css中height为auto时产生的高度加上上下paddingclientHeight：.
阅读全文
摘要：http://microformats.org/wiki/hcardhCard格式用于在html中标记人、公司、组织的信息，如name，address等hCard基于vCard， 通过在html标签中添加符合规则的class属性来达到标记信息的目的。vcard 作为根类名，表明hCard信息所在fn 必须元素，标记namen 标记structured name用于以下元素的容器honorific-prefix： 如：Ms， Mr， Drgiven-name： given nameadditional-name： other/middle namefamily-name： famil...
阅读全文
摘要：placeholder伪元素（有的浏览器版本把它当做伪类）可以用来对form中input等控件应用样式 1 2 3 4 5 6 7 8 9 Template Index10 11 25 26 27 28 29 30 31 32 33 效果如下由于这个方法没有标准型，所以导致各种不同浏览器支持不一样，可能会变动很大，如需在获得焦点时改变样式:focus::-moz-placeholder {}目前支持的样式属性：fontcolorbackgroundword-spacingletter-spacingtext-decor...
阅读全文
摘要：刚开始这么写的：1 function hasClass(element, cls) {2 var regexp = new RegExp("\\b" + cls + "\\b");3 return element.className.search(regexp) !== -1;4 } // end hasClass()用\b匹配word boundary，这样可以有效处理"aaa", "aaa bbb"的匹配，但是忘记了word boundary的明确定义Before the first character in
阅读全文
摘要：自己弄的一个小javascript库放在github，平时练习想使用这个库，从repository中得到链接如下https://github.com/qiu-deqing/dome/blob/master/src/dome.js直接用在html中引用，github返回的MIME类型为text/html浏览器不识别。需要适当修改：1.使用rawgithub.com替代github.com2.去掉blob/得到结果以后就可以用自己在建中的仓库做cdn了。遇到想要的功能随时添加到仓库。
阅读全文
摘要：\b 表示word boundary，匹配非字符，匹配的字符界限不包括在最终的匹配结果中，如：/\bm/ 匹配moon中的m/oo\b/ 不匹配moon中的oo，因为oo后的n是一个word character/oon\b/ 匹配moon中的oon\B 与\b相反，匹配任何non-word boundary[\b] 匹配退格符backspace，需注意
阅读全文
摘要：Block Element Modify使用类，不使用id选择器不使用元素选择器特殊的一些用法不依赖于block可直接命名如：.sr-only {}.block__element--modify {} Home About虽然有点难看。写起来也麻烦，不过语义清晰，好处多多
阅读全文
摘要：添加的图标会显示在标题左边，收藏页面时也会存在方法：在内添加link标签。设置rel为icon。href指定图片url，type指定icon类型如，与html同目录下有img文件夹，里面包含了google-icon.png1 http://www.w3.org/2005/10/howto-favicon
阅读全文
摘要：JPEG/JPG Joint Photographic Experts Group的首字母缩写。JPEG图片以24为颜色存储单个光栅图像。JPEG是与平台无关的格式，支持最高级别的压缩，不过这种压缩是有损耗的。可以提高或降低JPEG文件压缩的级别。但是，文件大小是以图像质量为代价的。文件压缩比可以高达100:1.（JPEG格式可以在10:1到20:1的比例下轻松压缩文件而图片质量不会下降）JPEG压缩可以很好地处理写实摄影作品。但是对于颜色较少、对比级别强烈、实心边框或纯色区域大的简单的作品，JPEG压缩无法提供理想的结果。有时压缩比会低到5:1，严重损失了图片的完整性。这一损失产生的原因是.
阅读全文
摘要：new Function([arg1 [, arg2 [, ... argN]],] functionBody)每次调用都会创建一个新函数：arg1, arg2, ... argN 为新函数形参名functionBody， 函数体新函数在创建时执行解析，比平时函数声明效率低下，通过Function构造函数创建的函数不会创建闭包。相当于定义全局函数。即在函数运行时只能访问函数自己本地变量以及全局变量。Function不包含任何属性和方法，它创建的实例，或者平时我们声明的函数，通过Function.prototype继承属性和方法：Function.prototype.apply(): 以第...
阅读全文