早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。到现在，这个功能已经上线了整整半年，这篇文章也足足拖延了半年才分享给大家，实在是对不住了，呵呵，今后彬Go一定要勤奋发Blog！

您还可以参考以下HTML5相关文章:
《HTML5 Drag&Drop 拖拽、FileReader实例教程》
《HTML5 WebSockets 基础使用教程》
《关于HTML 5 canvas 的基础教程》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》

　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览器”。本次拖拽上传的宣传口号：你敢”脱”，我就敢上传…

　　言归正题，首先看看效果，大家如果有人人网帐号的话可以在首页试一试拖拽上传功能，下面是演示视频：

拖拽上传应用主要使用了以下HTML5技术：

• Drag&Drop : HTML5基于拖拽的事件机制.
• File API :  可以很方便的让Web应用访问文件对象，File API包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的FileList和FileReader接口。
• FormData : FormData是基于XMLHttpRequest Level 2的新接口，可以方便web应用模拟Form表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现AJAX向后端发送文件数据了。

HTML5 Drag&Drop 拖拽事件

　　关于Drag&Drop拖拽事件，之前我写过一篇专门介绍的文章《给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)》，那篇文章详细讲解了Drag & Drap事件的原理和代码实例，这里的拖拽上传实现原理基本上是一样的，大家有兴趣或不太了解的话可以先看看那篇文章，我在这里就不再过多啰嗦了~下面直接出拖拽上传简要代码实例：

获取文件数据 HTML5 File API

　　在之前那篇文章中我也有介绍过关于File API中的FileReader接口，作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。关于FileReader的详细介绍和代码实例大家可以先去看看那篇文章。

　　今天我着重介绍一下File API中的FileList接口,它主要通过两个途径获取本地文件列表，一是<input type=”file”>的表单形式，另一种则是e.dataTransfer.files拖拽事件传递的文件信息。很显然，我们这里会用到后者。

　　使用files方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

　　拖拽上传需要注意的是需要判断两个条件，1:拖拽的是文件不是页面中的元素; 2:拖拽的是图片而不是其它文件,可以通过file.type属性获取文件的类型

　　下面让我们来看看如何结合之前的拖拽事件来实现拖拽图片并在页面中进行预览：

　　这里有一个简单的拖拽图片预览的Demo

　　这时你如果用FireBug等类似调试工具查看DOM的话，会看到<img>标签的src属性是一个超长的文件二进制数据，所以如果DOM有很多这类图片，那就要当心浏览器性能了，因为这些数据极大地扩充的页面的代码量，而每次页面的reflow都会对浏览器形成很大的负担，So,如果这些图片还在DOM中，那就尽量不要做动画或任何重绘操作，如果真的要做就尽量让图片脱离文档流，让其绝对定位比较靠谱。

补充：可以使用window.URL.createObjectURL(file)来获取文件的URL(Chrome下用window.webkitURL.createObjectURL(file))，这种方式获取的URL要比上面说的readAsDataURL简短很多。而且可以省去使用FileReader。下面是使用readAsDataURL与createObjectURL生成的<img>代码对比：

优化后的代码：

　　需要注意的是，window.URL.createObjectURL是有生命周期的，也就意味着你每用此方法获取URL，其生命周期都会和DOM一样，它会单独占用内存，所以当删除图片或不再需要它是，记得用window.URL.revokeObjectURL(file)来释放其内存。当然，如果你没有释放，刷新页面也是可以释放的。

AJAX上传图片(file.getAsBinary & FormData)

　　既然已经获取到了拖拽到web页面中图片的数据，下一步就是将其发送到服务器端了。

　　话说HTML5时代之前，AJAX传输文件二进制流数据是不可能完成的事情，而现在我们完全可以通过file.getAsBinary获取文件的二进制数据流，进而将其当做XHR的data数据传送到后端，8过由于Chrome不支持file的getAsBinary方法，FF3.6+支持此方法。所以Chrome就要另寻它法了，这时我们发现XMLHttpRequest Level 2中的FormData接口完美解决了这个问题，它可以很快捷的模拟Form表单数据并通过AJAX发送至后端，FormData的支持情况是FF5及以上支持，Chrome12及以上支持。

　　 file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的js代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据append到formdata对象中即可：

首先表单数据headers头信息需要以下两项：

• Content-Type ： 设置其为multipart/form-data来模拟表单数据
• boundary ： 表单数据中的分隔符，用于分隔不同的文件或表单项，这是服务器端设置的格式。

发送时的post数据类似这样：

好了，现在文件上传成功后你就可以按照平常AJAX的操作来进行后续处理了。

最后，再来总结一下拖拽上传的技术要点：

1. 监听拖拽：监听页面元素的拖拽事件，包括：dragenter、dragover、dragleave和drop，一定要将dragover的默认事件取消掉，不然无法触发drop事件。如需拖拽页面里的元素，需要给其添加属性draggable=”true”；
2. 获取拖拽文件：在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，.length属性获取文件数量，.type属性获取文件类型。
3. 读取图片数据并添加预览图：实例化FileReader对象，通过其readAsDataURL(file)方法获取文件二进制流，并监听其onload事件，将e.result赋值给img的src属性，最后将图片append到DOM中。
4. 发送图片数据：使用file.getAsBinary 和 FormData分别模拟表单数据AJAX提交文件流。

　　OK,拖拽上传就讲到这里，欢迎大家一起探讨。也在这里推荐一下人人网FED的Blog，大家多多捧场，哈~

留意更新

订阅彬Go以查看HTML5最新资源、教程。

　　上周六有幸同我们人人网的几个同事一起去Google总部参加了《给力HTML5 —— 2011 Google HTML5 训练营》，从下午1点多到晚上9点多8个小时左右的时间，收获还是很大的，8个小时的时间把以前一直想学或想做的事情都给搞了一些。好久没有写博客了，今天也该分享些给力的东西了，正好借此次机会跟大家分享些HTML5相关的给力的技术（sessionStorage、localStorage、Web SQL DateBase、Indexed DB、Canvas绘图、FileReader、Drag&Drop…），何止是给力，简直就是给力！

您还可以参考以下HTML5相关文章:
《HTML5 WebSockets 基础使用教程》
《关于HTML 5 canvas 的基础教程》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》

Google HTML5 训练营

先简单介绍一下这个训练营的活动流程：
　　　1:00 – 1:30 注册
　　　1:30 – 2:30 HTML5 技术剖析
　　　技术讲座1 —— Google 工程师
　　　技术讲座2 —— 特邀嘉宾（李靖威、李继成，就职于人人网）
　　　2:30 – 3:00 宣布竞赛规则，开始组队
　　　3:00 – 6:30 作品创作 / 提交
　　　6:30 – 7:00 作品展示
　　　7:00 – 7:30 评奖、颁奖

　　讲座部分，先是Google工程师寒蕊MM跟我们分享了些HTML5的新技术概况，其中大致包括：sessionStorage、localStorage、Web SQL DateBase 、Indexed DB，寒蕊MM还专门写了篇关于IndexedDB的文章《客户端数据存储》，文章用实例的方式讲了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。

　　其中Web SQL Database虽是HTML5的技术，但由于某些原因，W3C组织(Web Applications Working Group)已不再维护这项技术，也就是说虽然目前Chrome、FireFox新版本浏览器支持这项技术，但不一定未来的版本还会支持。以下为w3c官网的声明：

Beware. This specification is no longer in active maintenance and the Web
Applications Working Group does not intend to maintain it further.

　　Indexed DataBase最初是由Oracle提出的数据库API，没记错的话起初叫做Simple DataBase，之后演变成Indexed DataBase，而且已被Chrome和FireFox(版本4)所支持。

　　这次活动规模比较小，由于人数限制在了30人，所以组队Coding阶段，每队5人，分成了6组~接下来就是短短3个小时左右的Coding了，我们人人网的四个人和另一位有Canvas经验的邱亮同学一起开发一个纯HTML5的可涂鸦日记本，其中有个插曲:一开始项目名字没多想就直接叫做《我的日记本》了，到最后提交项目的时候，Google MM说要起一个简洁且酷一些的名字，好吧，那我们就起一个简洁酷一些的名字，最后就叫《我日》！哇咔咔~让大家”贱笑”了~

　　言归正传，《我日》项目之所以叫纯HTML5，其实只是使用了些HTML5技术，在短短的3个小时时间，从功能到分工开发，时间很紧~所以只是做了个小小的Demo版，基本功能实现的差不多了，但愿以后还能有时间把它完善一下~其中使用了这些HTML5技术：

　　1.Web SQL DataBase ：存取日记数据
　　2.HTML5 Drag&Drop 事件 ：监听网页内图片拖拽及本地图片直接拖拽到日记中的事件
　　3.FileReader ：获取本地图片拖拽到日记本里的图片数据
　　4.Canvas ：实现日记涂鸦功能(画笔、调色、文字、图片绘制到画布等…)
　　5.HTML5新标签 ：如:<input type=”range”… /> 、 <section> 、<article>等…
　　6.CSS3

　　今天我只详细讲讲我的分工部分：HTML5 Drag & Drop 和 FireReader这两个东西，以后有机会在和大家分享其他技术。

HTML5 Drag & Drop 事件

　　过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，还要不停的修改元素的位置，代码要堆很多，而且性能上也很不好(不停地修改元素位置会导致页面reflow，除非绝对定位)，现在有了html5原生的Drag & Drop 拖拽事件，真的是方便了许多，用”事半功倍”来形容绝不为过。

Drag & Drop 包括以下事件：

• dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素
• dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素
• dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素
• dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素
• dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素
• drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素

完成一次成功页面内元素拖拽的行为事件过程应该是： dragstart –> dragenter –> dragover –> drop –> dragend

Drag & Drop 网页内的元素拖拽：

　　HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽，如果draggable=”true”，则元素可被拖拽，否则只能选择元素的文本。

　　值得一提的是HTML5支持拖拽数据存储，使用dataTransfer接口，作用于元素的拖拽基础上，dataTransfer对象包含以下属性和方法：

• dataTransfer.dropEffect [ = value ]：返回已选择的拖放效果，如果该操作效果与起初设置的effectAllowed效果不符，则拖拽操作失败。可以设置修改，包含这几个值：“none”, “copy”, “link” 和 “move”。
• dataTransfer.effectAllowed [ = value ]：返回允许执行的拖拽操作效果，可以设置修改，包含这些值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all” 和 “uninitialized”
• dataTransfer.types：返回在dragstart事件出发时为元素存储数据的格式，如果是外部文件的拖拽，则返回”files”
• dataTransfer.clearData ( [ format ] )：删除指定格式的数据，如果未指定格式，则删除当前元素的所有携带数据
• dataTransfer.setData(format, data)：为元素添加指定数据
• dataTransfer.getData(format)：返回指定数据，如果数据不存在，则返回空字符串
• dataTransfer.files：如果是拖拽文件，则返回正在拖拽的文件列表FileList
• dataTransfer.setDragImage(element, x, y)：制定拖拽元素时跟随鼠标移动的图片，x、y分别是相对于鼠标的坐标(据测试，Chrome暂不支持)
• dataTransfer.addElement(element)：添加一起跟随拖拽的元素，如果你想让某个元素跟随被拖拽元素一同被拖拽，则使用此方法(据测试，Chrome暂不支持)

在dragstart事件触发时可以为被拖拽元素存储数据，就是使用上面说到的dataTransfer.setData，setData的数据格式一般有两种：”text/plain”(用于文本数据)和”text/uri-list”(用于url)，你可以先为某个可拖拽元素设置微数据，然后为它设置draggable属性为true，之后在其dragstart事件触发时存储数据：
html部分：

javascript部分：

在拖拽结束的时候便可以获取相应元素的数据:

创建拖拽事件监听的时候记得要把默认的行为事件去掉，毕竟浏览器是有默认拖拽行为的,尤其是dragover事件一定要使用e.preventDefault()，不然drop事件可能不会被触发：

上面讲的这些基本上就能完成页面内元素的拖拽操作了，下面我们来说说从本地拖拽图片到页面元素中用到的技术：

FileReader获取本地拖拽文件

点击查看实例Demo

　　作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。

来看看FileReader支持的方法、属性和事件：

今天只说说关于拖拽本地文件到页面的几个相关FileReader属性和事件：

• readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl
• onload事件：当读取文件成功完成的时候触发此事件

在FileReader onload事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。

OK，通过以上代码你就可以完成基本的本地图片拖拽到页面指定元素内的功能了。
点击查看实例Demo

《我日》Demo 预览

注意，以上demo仅可使用新版Chrome和FireFox查看，IE不支持。

好了，今天先讲这些，今后会更新更多HTML5相关的技术的，希望大家多多关注~

留意更新

订阅彬Go以查看HTML5最新资源、教程。

前言

良好的JavaScript书写习惯的优点不言而喻，今天彬Go向大家推荐Dojo Javascript 编程规范，相当不错的 Javascript 编程风格规范，建议大家可以借鉴一下此规范编写 Javascript。感谢i.feelinglucky的翻译。

序

Any violation to this guide is allowed if it enhances readability.

所有的代码都要变成可供他人容易阅读的。

快读参考

核心 API 请使用下面的风格：

下面的虽然不是必要的，但建议使用：

命名规范

1.变量名称 必须为 小写字母。
2.类的命名使用骆驼命名规则，例如：

3.常量 必须 在对象（类）或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义，并且其成员 必须 使用骆驼命名规则或使用大写：

4.简写单词 不能使用 大写名称作为变量名：

5.方法的命令 必须 为动词或者是动词短语：

6.公有类的命名 必须 使用混合名称（mixedCase）命名。
7.CSS 变量的命名 必须 使用其对应的相同的公共类变量。
8.私有类的变量属性成员 必须 使用混合名称（mixedCase）命名，并前面下下划线（_）。例如：

9.变量如果设置为私有，则前面 必须 添加下划线。

10.通用的变量 必须 使用与其名字一致的类型名称：

11.所有的变量名 必须 使用英文名称。
12.变量如有较广的作用域（large scope），必须使用全局变量；此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。
13.如果变量有其隐含的返回值，则避免使用其相似的方法：

14.公有变量必须清楚的表达其自身的属性，避免字义含糊不清，例如：

，而非 MseEvtHdlr。
　　请再次注意这条规定，这样做得的好处是非常明显的。它能明确的表达表达式所定义的含义。例如：
　　　

15.类/构造函数 可以使用 扩展其基类的名称命名，这样可以正确、迅速的找到其基类的名称：
　EventHandler
　UIEventHandler
　MouseEventHandler
　　基类可以在明确描述其属性的前提下，缩减其命名：
　　　MouseEventHandler as opposed to MouseUIEventHandler.

特殊命名规范

1. 术语 “get/set” 不要和一个字段相连，除非它被定义为私有变量。
2. 前面加 “is” 的变量名 应该 为布尔值，同理可以为 “has”, “can” 或者 “should”。
3. 术语 “compute” 作为变量名应为已经计算完成的变量。
4. 术语 “find” 作为变量名应为已经查找完成的变量。
5. 术语 “initialize” 或者 “init” 作为变量名应为已经实例化（初始化）完成的类或者其他类型的变量。
6. UI （用户界面）控制变量应在名称后加控制类型，例如： leftComboBox, TopScrollPane。
7. 复数必须有其公共的名称约定（原文：Plural form MUST be used to name collections）。
8. 带有 “num” 或者 “count” 开头的变量名约定为数字（对象）。
9. 重复变量建议使用 “i”, “j”, “k” （依次类推）等名称的变量。
10. 补充用语必须使用补充词，例如： get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end, etc.
11. 能缩写的名称尽量使用缩写。
12. 避免产生歧义的布尔变量名称，例如：
    　　isNotError, isNotFound 为非法
13. 错误类建议在变量名称后加上 “Exception” 或者 “Error”。
14. 方法如果返回一个类，则应该在名称上说明返回什么；如果是一个过程，则应该说明做了什么。

文件

缩进请使用 4 个空白符的制表位。
如果您的编辑器支持 文件标签_（file tags），请加添如下的一行使我们的代码更容易阅读：

译注：老外用 VIM 编辑器比较多，此条可以选择遵循。

代码折叠必须看起来是完成并且是合乎逻辑的：

注：表达式的缩进与变量声明应为一致的。
注：函数的参数应采用明确的缩进，缩进规则与其他块保持一致。

变量

1. 变量必须在声明初始化以后才能使用，即便是 NULL 类型。
2. 变量不能产生歧义。
3. 相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
4. 变量应该尽量保持最小的生存周期。
5. 循环/重复变量的规范：
1. 只有循环控制块的话，则必须使用 FOR 循环。
2. 循环变量应该在循环开始前就被初始化；如使用 FOR 循环，则使用 FOR 语句初始化循环变量。
3. “do … while” 语句是被允许的。
4. “break” 和 “continue” 语句仍然允许使用（但请注意）。
6. 条件表达式
1. 应该尽量避免复杂的条件表达式，如有必要可以使用临时布尔变量。
2. The nominal case SHOULD be put in the “if” part and the exception in the “else” part of an “if” statement.
3. 应避免在条件表达式中加入块。
7. 杂项
1. 尽量避免幻数（Magic numbers），他们应该使用常量来代替。
2. 浮点变量必须指明小数点后一位（即使是 0）。
3. 浮点变量必须指明实部，即使它们为零（使用 0. 开头）。

布局

块

1. 普通代码段 应该 看起来如下：
   while (!isDone){
           doSomething();
       isDone = moreToDo();
   }
2. IF 语句 应该 看起来像这样：
   if (someCondition){
           statements;
   } else if (someOtherCondition){
       statements;
   } else {
       statements;
   }
3. FOR 语句 应该 看起来像这样：
   for (initialization; condition; update){
           statements;
   }
4. WHILE 语句 应该 看起来像这样：
   while (!isDone) {
           doSomething();
       isDone = moreToDo();
   }
5. DO … WHILE 语句 应该 看起来像这样：
   do {
           statements;
   } while (condition);
6. SWITCH 语句 应该 看起来像这样：
   switch (condition) {
   case ABC:
       statements;
       //  fallthrough
   case DEF:
       statements;
       break;
   default:
           statements;
       break;
   }
7. TRY … CATCH 语句 应该 看起来像这样：
   try {
       statements;
   } catch(ex) {
       statements;
   } finally {
       statements;
   }
8. 单行的 IF – ELSE，WHILE 或者 FOR 语句也 必须 加入括号，不过他们可以这样写：
   if (condition){ statement; }
   while (condition){ statement; }
   for (intialization; condition; update){ statement; }

空白

1. 操作符 建议 使用空格隔开（包括三元操作符）。
2. 下面的关键字 避免使用 空白隔开：
   • break
   • catch
   • continue
   • do
   • else
   • finally
   • for
   • function （如果为匿名函数，例如：var foo = function(){}; ）
   • if
   • return
   • switch
   • this
   • try
   • void
   • while
   • with
3. 下面的关键字必须使用空白隔开：
   • case
   • default
   • delete
   • function （如果为申明，例如：function foo(){}; ）
   • in
   • instanceof
   • new
   • throw
   • typeof
   • var
4. 逗号（,） 建议 使用空白隔开。
5. 冒号（:） 建议 使用空白隔开。
6. 点（.） 在后部 建议 使用空白隔开。
7. 点（.） 避免 在前部使用空白。
8. 函数调用和方法 避免 使用空白，例如： doSomething(someParameter); // 而非 doSomething (someParameter)
9. 逻辑块 之间使用空行。
10. 声明 建议 对齐使其更容易阅读。

注释

1. 生涩的代码就 没有必要 添加注释了，首先您需要 重写 它们。
2. 所有的注释请使用英文。
3. 从已解决的方案到未开发的功能，注释 必须 与代码相关。
4. 大量的变量申明后 必须 跟随一段注释。
5. 注释需要说明的是代码段的用处，尤其是接下来的代码段。
6. 注释 没有必要 每行都添加。

文档

下面提供了一些基本的函数或者对象的描述方法：

• 总结（summary）: 简短的表述此函数或者对象实现的目的
• 描述（description）: 对于此函数或者类的简短的描述
• 返回（return）: 描述此函数返回什么（并不包括返回类型）

基本函数信息

对象函数信息

没有返回值描述

函数的声明

在有的情况下，对于函数的调用和声明是隐义（invisible）的。在这种情况下，我们没有办法在函数中加入说明等（供程序调用）。如果您遭遇了这种情况，您可以使用一个类来封装函数。

注：此此方法只能在函数没有初始化的参数情况下。如过不是，则它们会被忽略。

全局参数描述
　如果你想增加一个描述，你可以将它们移至初始化块。

基本信息格式为： *关键字* 描述字段 （ *key* Descriptive sentence）
参数和变量的格式为： *关键字* ~*类型*~ 描述字段 （ *key* ~*type*~ Descriptive sentence）
注： *关键字* 和 ~*类型*~ 可以使用任何字母和数字表述。

function (foo, bar) {
    // foo: String
    //          used for being the first parameter
    // bar: int
    //          used for being the second parameter
}

变量

由于实例变量、原型变量和外部变量的声明是一致的，所以有很多的方法声明、修改变量。具体的如何定义和定位应在变量最先出现的位置指明变量的名称、类型、作用域等信息。

function foo() {
    // myString: String
    // times: int
    //          How many times to print myString
    // separator: String
    //          What to print out in between myString*
    this.myString = "placeholder text";
    this.times = 5;
}

foo.prototype.setString = function (myString) {
    this.myString = myString;
}

foo.prototype.toString = function() {
    for(int i = 0; i < this.times; i++) {
        dojo.debug(this.myString);
        dojo.debug(foo.separator);
        }
}
foo.separator = "=====";

对象中的变量注释

应使用和对象值和方法一致的标注方式，比如在他们声明的时候：

{
    // key: String
    //          A simple value
    key: "value",
    // key2: String
    //          Another simple value
}

返回值

因为函数可以同时返回多个不同（类型）的值，所以应每个返回值之后加入返回类型的注释。注释在行内注释即可，如果所有的返回值为同一类型，则指明返回的类型；如为多个不同的返回值，则标注返回类型为”mixed”。

function() {
        if (arguments.length) {
                return "You passed argument(s)"; // String
        } else {
        return false; // Boolean
    }
}

伪代码（有待讨论）

有时候您需要在函数或者类中添加对于此函数和类的功能性流程描述。如果您打算这样做，您可以使用 /*======== （= 字符最好出现 5 次或者更多），这样做的好处就是可以不用将这些东西加入代码（译注：原作者的意思可能为代码管理系统）。

这样看起来在 /*===== 和 =====*/ 会有非常长的一段注释，等待功能调整完毕以后就可以考虑是否删除。

/*=====
module.pseudo.kwArgs = {
        // url: String
    //          The location of the file
    url: "",
    // mimeType: String
    //          text/html, text/xml, etc
    mimeType: ""
}
=====*/

function(/*module.pseudo.kwArgs*/ kwArgs){
    dojo.debug(kwArgs.url);
        dojo.debug(kwArgs.mimeType);
}

原文链接： http://dojotoolkit.org/developer/StyleGuide
翻译（Translated by）：i.feelinglucky{at}gmail.com from http://www.gracecode.com

]]> http://blog.bingo929.com/dojo-javascript-style-guide.html/feed 28 http://blog.bingo929.com/html5-websockets.html http://blog.bingo929.com/html5-websockets.html#comments Mon, 09 Aug 2010 17:30:28 +0000 彬Go http://blog.bingo929.com/?p=3003

　　HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。

您还可以参考以下HTML5相关文章:
《关于HTML 5 canvas 的基础教程》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》

什么是WebSockets？

　　WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。

WebSockets将会替代什么？

　　WebSockets可以替代Long Polling(PHP服务端推送技术)，这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发生请求暂停，因此会需要建立新的连接。

　　一些AJAX应用使用上述技术-这经常是归因于低资源利用。

　　试想一下，如果服务器在早晨会自启动并发送数据到那些希望接收而不用提前建立一些连接端口的客户端，这是一件多棒的事情啊！欢迎来到PUSH技术的世界！

第一步：搞定WebSocket服务器

　　这篇教程会把更多的精力放在客户端的创建而不是服务器端的执行等操作。

　　我使用基于windows 7的XAMPP来实现本地运行PHP。phpwebsockets是PHP WebSocket服务器。(以我的经验这个版本存在一些小问题，我已对它做了些修改并上传源文件共享给大家)下面的这些不同版本也可以实现WebSocket，如果某个不能用，你可以试试其它版本或者继续看下面的教程。

　　jWebSocket (Java)
　　web-socket-ruby (ruby)
　　Socket IO-node (node.js)

启动Apache服务器

第二步：修改URLs和端口

　　根据你之前的安装修改服务器，下面是setup.class.php中的例子：

public function __construct($host='localhost',$port=8000,$max=100)  
{  
    $this->createSocket($host,$port);  
}

　　浏览文件并在适当情况下进行更改。

第三步：开始创建客户端

　　下面来创建基本模板，这是我的client.php文件：

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
 
<title>WebSockets Client</title>  
 
</head>  
<body>  
<div id="wrapper">  
 
    <div id="container">  
 
        <h1>WebSockets Client</h1>  
 
        <div id="chatLog">  
 
        </div><!-- #chatLog -->  
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>  
 
        <input id="text" type="text" />  
        <button id="disconnect">Disconnect</button>  
 
    </div><!-- #container -->  
 
</div>  
</body>  
</html>​

　　我们已经创建里基本模板：一个chat log容器，一个input输入框和一个断开连接的按钮。

第四步：添加一些CSS

　　没什么花俏代码，只是处理一下标签的样式。

body {  
    font-family:Arial, Helvetica, sans-serif;  
}  
#container{  
    border:5px solid grey;  
    width:800px;  
    margin:0 auto;  
    padding:10px;  
}  
#chatLog{  
    padding:5px;  
    border:1px solid black;  
}  
#chatLog p {  
    margin:0;  
}  
.event {  
    color:#999;  
}  
.warning{  
    font-weight:bold;  
    color:#CCC;  
}

第五步：WebSocket事件

首先让我们尝试并理解WebSocket事件的概念：

WebSocket事件：
我们将使用三个WebSocket事件：
onopen: 当接口打开时
onmessage: 当收到信息时
onclose: 当接口关闭时

我们如何来实现呢？
首先创建WebSocket对象

var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

然后向下面这样检测事件

socket.onopen = function(){  
    alert("Socket has been opened!");  
}

当我们收到信息时这样做：

socket.onmessage = function(msg){  
    alert(msg); //Awesome!  
}

但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。

第六步：JavaScript

　　首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持WebSocket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。

$(document).ready(function() {  
    if(!("WebSocket" in window)){  
        $('#chatLog, input, button, #examples').fadeOut("fast");  
        $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');  
    }else{  
 
    //The user has WebSockets  
 
    connect();  
 
    function connect(){  
        //the connect function code is below  
 
    }  
});

　　如你所见，如果用户浏览器支持WebSocket，我们将执行connect()函数。这里是核心功能，我们将开始创建open、close和receive事件。

我们将在我们的服务器定义URL。

var socket;  
var host = "ws://localhost:8000/socket/server/startDaemon.php";

　　你可能会发现URL中怎么没有http？恩，是的，这是一个WebSocket URL，使用了不同的协议。下面是URL分解图示：

　　下面让我们继续完成connect()函数，我们将代码放入try/catch块，这样如果代码出现问题，我们能让用户知道。我们创建WebSocket，并将信息传递到message()函数，之后会做讲解。我们创建我们的onopen、onmessage和onclose函数. 需要注意的是我们为用户提供了端口状态，这并不是必需的，但我们把它放进来主要是为了方便调试。

CONNECTING = 0
OPEN = 1
CLOSED = 2

function connect(){  
    try{  
 
    var socket;  
    var host = "ws://localhost:8000/socket/server/startDaemon.php";  
    var socket = new WebSocket(host);  
 
        message('<p class="event">Socket Status: '+socket.readyState);  
 
        socket.onopen = function(){  
             message('<p class="event">Socket Status: '+socket.readyState+' (open)');  
        }  
 
        socket.onmessage = function(msg){  
             message('<p class="message">Received: '+msg.data);  
        }  
 
        socket.onclose = function(){  
             message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');  
        }            
 
    } catch(exception){  
         message('<p>Error'+exception);  
    }  
}

　　message()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。 我们在socket事件函数中为段落(<p>)标签创建适当的class，我们在message函数中只有一个段落结束标签。

function message(msg){  
    $('#chatLog').append(msg+'</p>');  
}

目前的成果

　　如果你已按上面教程按部就班的做的话，很好，我们已经创建了 HTML/CSS 模板、创建并建立Websocket连接、通过创建连接保持用户的进展更新。

第七步：发送数据

　　现在我们已经有了提交按钮，但我们还需要监听用户按下键盘的事件，并运行send函数，下面的’13′便是回车键对应的ASCII码。

$('#text').keypress(function(event) {  
    if (event.keyCode == '13') {  
        send();  
    }  
});

下面是send()函数：

function send(){  
 
    var text = $('#text').val();  
    if(text==""){  
        message('<p class="warning">Please enter a message');  
        return ;  
    }  
    try{  
        socket.send(text);  
        message('<p class="event">Sent: '+text)  
    } catch(exception){  
    message('<p class="warning"> Error:' + exception);  
    }  
 
    $('#text').val("");  
 
}

下面我们需要：

socket.send();

　　那些额外的代码做了以下工作：检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。

关闭Socket

　　关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。

$('#disconnect').click(function(){  
    socket.close();  
});

完整JavaScript代码

$(document).ready(function() {  
 
  if(!("WebSocket" in window)){  
  $('#chatLog, input, button, #examples').fadeOut("fast");  
  $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');  
  }else{  
      //The user has WebSockets  
 
      connect();  
 
      function connect(){  
          var socket;  
          var host = "ws://localhost:8000/socket/server/startDaemon.php";  
 
          try{  
              var socket = new WebSocket(host);  
 
              message('<p class="event">Socket Status: '+socket.readyState);  
 
              socket.onopen = function(){  
                 message('<p class="event">Socket Status: '+socket.readyState+' (open)');  
              }  
 
              socket.onmessage = function(msg){  
                 message('<p class="message">Received: '+msg.data);  
              }  
 
              socket.onclose = function(){  
                message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');  
              }          
 
          } catch(exception){  
             message('<p>Error'+exception);  
          }  
 
          function send(){  
              var text = $('#text').val();  
 
              if(text==""){  
                  message('<p class="warning">Please enter a message');  
                  return ;  
              }  
              try{  
                  socket.send(text);  
                  message('<p class="event">Sent: '+text)  
 
              } catch(exception){  
                 message('<p class="warning">');  
              }  
              $('#text').val("");  
          }  
 
          function message(msg){  
            $('#chatLog').append(msg+'</p>');  
          }  
 
          $('#text').keypress(function(event) {  
              if (event.keyCode == '13') {  
                send();  
              }  
          });    
 
          $('#disconnect').click(function(){  
             socket.close();  
          });  
 
      }//End connect  
 
  }//End else  
 
});

第九步：运行WebSocket服务器

我们要输入一些命令行，XAMPP提供了比较方便的shell选项。点击XAMPP控制面板的’shell’按钮并输入：
php -q path\to\server.php
现在你已经运行了WebSocket服务器！

大功告成！

　　当页面读取后，将尝试创建一个WebSocket连接，然后用户可以输入信息并从服务器接收信息。

　　感谢大家耐心阅读本教程，希望你能从中学到有用的知识，HTML5 WebSocket的确令人兴奋不已！大家可以通过The WebSocket API了解HTML5 WebSocket的最新动态。

点击这里下载源文件

留意更新

订阅彬Go以查看HTML5最新资源、教程。

英文原文:Start Using HTML5 WebSockets Today
翻译原文:HTML5 WebSockets 基础使用教程(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/html5-websockets.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

]]> http://blog.bingo929.com/html5-websockets.html/feed 31 http://blog.bingo929.com/html5-and-css3-tools-list.html http://blog.bingo929.com/html5-and-css3-tools-list.html#comments Mon, 28 Jun 2010 12:37:05 +0000 彬Go http://blog.bingo929.com/?p=2971

　　HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性！我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容中彬Go将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。彬Go希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。

您还可以参考以下HTML5和CSS3相关文章:
《关于HTML 5 canvas 的基础教程》
《用CSS3制作50个超棒动画效果教程》
《5个CSS3技术实现设计增强》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》
《提升你设计水平的CSS3新技术》

HTML5 & CSS3 准备就绪

　　该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。

HTML5安全手册

CSS3按钮生成器

　　所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。

When can I use…（HTML5 & CSS3 浏览器兼容性）

　　很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。

CSS3颜色值/名称速查手册

　　CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等…

CSS3生成器

　　在线测试CSS3新特性，即时生成效果。

Modernizr

当前浏览器对HTML5支持情况测试

　　该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细，很有用！

CSS 边框半径(代码生成器)

　　通过输入数值即可生成CSS3代码的CSS 边框代码生成器。使用很简便。

FindMeByIP（HTML5 & CSS3 浏览器兼容性手册）

　　很详细的HTML5和CSS3浏览器兼容性手册。

CSS3渐变生成器

CSS3 Watch

前端开发工具&资源小集合

CSS3, please!(实时体验CSS3代码)

font dragr

CSS3生成器

CSS桌面

　　CSS桌面可以让你在线练习CSS3代码，并实时将渲染效果呈现在右侧，很棒的CSS3在线练习工具。

HTML5修订版本跟踪器

font-face 生成器

CSS3 选择器测试工具

IE 打印保险器

详细CSS 浏览器支持情况列表

留意更新

订阅彬Go以查看HTML5及CSS3最新资源、教程。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/html5-and-css3-tools-list.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

]]> http://blog.bingo929.com/html5-and-css3-tools-list.html/feed 16 http://blog.bingo929.com/html-5-canvas-the-basics-html5.html http://blog.bingo929.com/html-5-canvas-the-basics-html5.html#comments Tue, 15 Jun 2010 17:31:30 +0000 彬Go http://blog.bingo929.com/?p=2947

HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。

大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas ：

• 下载支持 3D canvas, HTML video 和 File I/O 的 Opera
• 关于 Opera 3D canvas 上下文的文章
• 关于 Firefox 3D canvas
  上下文的文章

本文介绍 2D canvas
基础以及如何使用基本 canvas 函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解 JavaScript 基础知识。

可以点击此处批量下载本文实例代码

目录

• 简述
• canvas 基础
• 2D context API
  • 基本线条
  • 路径
  • 插入图像
  • 像素级操作
  • 文字
  • 阴影
  • 颜色渐变
• 小节

canvas 基础

创建 canvas 的方法很简单，只需要在 HTML 页面中添加 <canvas> 元素：

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

为了能在 JavaScript 中引用元素，最好给元素设置 ID ；也需要给 canvas 设定高度和宽度。

创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas
元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果)：

// Get a reference to the element.
var elem = document.getElementById('myCanvas');
 
// Always check for properties 和 methods, to make sure your code doesn't break
// in other browsers.
if (elem &amp;&amp; elem.getContext) {
  // Get the 2d context.
  // Remember: you can only initialize one context per element.
  var context = elem.getContext('2d');
  if (context) {
    // You are done! Now you can draw your first rectangle.
    // You only need to provide the (x,y) coordinates, followed by the width and
    // height dimensions.
    context.fillRect(0, 0, 150, 100);
  }
}

可以把上面代码放置在文档 head 部分中，或者放在外部文件中。

2D context API

介绍了如何创建 canvas 后，让我们来看看 2D canvas API，看看能用这些函数做些什么。

基本线条

上面的例子中展示了绘制矩形是多么简单。

通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla()（ 若浏览器支持，如 Opera 10 和 Firefox 3)。

通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。

可以使用 lineWidth 属性改变线条粗细。让我们看看使用了fillRect,strokeRect clearRect 和其他的例子：

context.fillStyle   = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth   = 4;
 
// Draw some rectangles.
context.fillRect  (0,   0, 150, 50);
context.strokeRect(0,  60, 150, 50);
context.clearRect (30, 25,  90, 60);
context.strokeRect(30, 25,  90, 60);

此例子效果图见图1.

图 1: fillRect, strokeRect 和
clearRect效果图

路径

通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。

下面是一个绘制三角形的例子：

// Set the style properties.
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;
 
context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
 
// Done! Now fill the shape, 和 draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

其效果图见图2.

图 2: 三角形

另一个较负责的例子中使用了直线、曲线和圆弧。

插入图像

drawImage 方法允许在 canvas 中插入其他图像
( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数：

• 3个参数：最基本的 drawImage 使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。
• 5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
• 9个参数：最复杂drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

下面是上述三个使用方法的例子：

// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy);

// Five arguments: the element, destination (x,y) coordinates, and destination
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);

// Nine arguments: the element, source (x,y) coordinates, source width and
// height (for cropping), destination (x,y) coordinates, and destination width
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

其效果见图3.

图 3: drawImage 效果图。

像素级操作

2D Context API 提供了三个方法用于像素级操作：createImageData, getImageData, 和
putImageData。

ImageData对象保存了图像像素值。每个对象有三个属性: width, height 和
data。data 属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至 255，包括alpha在内!)。像素的顺序从左至右，从上到下，按行存储。

为了更好的理解其原理，让我们来看一个例子——绘制红色矩形

// Create an ImageData object.
var imgd = context.createImageData(50,50);
var pix = imgd.data;
 
// Loop over each pixel 和 set a transparent red.
for (var i = 0; n = pix.length, i &lt; n; i += 4) {
  pix[i  ] = 255; // red channel
  pix[i+3] = 127; // alpha channel
}
 
// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0,0);

注意: 不是所有浏览器都实现了 createImageData。在支持的浏览器中，需要通过 getImageData 方法获取 ImageData 对象。请参考示例代码。

通过 ImageData 可以完成很多功能。如可以实现图像滤镜，或可以实现数学可视化 (如分形和其他特效)。下面特效实现了简单的颜色反转滤镜：

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>);
var pix = imgd.data;
 
// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i &lt; n; i += 4) {
  pix[i  ] = 255 - pix[i  ]; // red
  pix[i+1] = 255 - pix[i+1]; // green
  pix[i+2] = 255 - pix[i+2]; // blue
  // i+3 is alpha (the fourth element)
}
 
// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, <var>x</var>, <var>y</var>);

图 4 显示了使用此滤镜后的 Opera
图像 (图 3是原图)。

图 4: 颜色反转滤镜

文字

虽然最近的 WebKit 版本和 Firefox 3.1 nightly build 才开始支持 Text API ，为了保证文章完整性我决定仍在这里介绍文字 API 。

context 对象可以设置以下 text 属性：

• font：文字字体，同 CSS font-family 属性
• textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
• textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic.

有两个方法可以绘制文字： fillText 和 strokeText。第一个绘制带 fillStyle 填充的文字，后者绘制只有 strokeStyle 边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的
(x,y) 坐标的相对位置。

下面是一个在 canvas 中绘制”hello world” 文字的例子

context.fillStyle    = '#00f';
context.font         = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText  ('Hello world!', 0, 0);
context.font         = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

图 5 是其效果图。

图 5: 文字效果

阴影

目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为：

• shadowColor：阴影颜色。其值和 CSS 颜色值一致。
• shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
• shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。

下面是 canvas 阴影的例子：

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
context.fillStyle     = '#00f';
context.fillRect(20, 20, 150, 100);

其效果见图 6。

图 6: canvas 阴影效果——蓝色矩形，红色阴影

颜色渐变

除了 CSS 颜色， fillStyle 和 strokeStyle 属性可以设置为 CanvasGradient 对象。——通过 CanvasGradient可以为线条和填充使用颜色渐变。

欲创建 CanvasGradient 对象，可以使用两个方法：createLinearGradient 和 createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。

创建颜色渐变对象后，可以使用对象的 addColorStop 方法添加颜色中间值。

下面的代码演示了颜色渐变使用方法：

// You need to provide the source 和 destination (x,y) coordinates
// for the gradient (from where it starts 和 where it ends).
var gradient1 = context.createLinearGradient(<var>sx</var>, <var>sy</var>, <var>dx</var>, <var>dy</var>);
 
// Now you can add colors in your gradient.
// The first argument tells the position for the color in your gradient. The
// accepted value range is from 0 (gradient start) to 1 (gradient end).
// The second argument tells the color you want, using the CSS color format.
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue
 
// For the radial gradient you also need to provide source
// 和 destination circle radius.
// The (x,y) coordinates define the circle center points (start 和
// destination).
var gradient2 = context.createRadialGradient(<var>sx</var>, <var>sy</var>, <var>sr</var>, <var>dx</var>, <var>dy</var>, <var>dr</var>);
 
// Adding colors to a radial gradient is the same as adding colors to linear
// gradients.

我也准备了一个更复杂的例子，使用了线性颜色渐变、阴影和文字。其效果见图 7。

图 7: 使用线性颜色渐变的例子

canvas 演示

如果你想知道使用 Canvas可以做些什么，可以参看以下的工程：

• Opera Widget：
  • SimAquarium
  • Artist’s Sketchbook
  • Spirograph
• 在线工程和演示
  • Newton polynomial
  • Canvascape – “3D Walker”
  • Paint.Web – painting demo, open-source
  • Star-field flight
  • Interactive blob

小节

Canvas 是 HTML 5最让人期待的特性之一，目前已获得大部分 Web 浏览器支持。Canvas 可以帮助创建游戏、增强图形用户界面。2D context API 提供大量图形绘制功能——我希望通过本文你了解了 canvas 使用，并且你有兴趣了解更多！

本文转自：operachina

本文翻译自 HTML 5 canvas – the basics
作者 Mihai Sucan

]]> http://blog.bingo929.com/html-5-canvas-the-basics-html5.html/feed 28 http://blog.bingo929.com/50-awesome-css3-animations.html http://blog.bingo929.com/50-awesome-css3-animations.html#comments Mon, 15 Mar 2010 06:20:28 +0000 彬Go http://blog.bingo929.com/?p=2857

　　CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)

您还可以参考以下CSS3相关文章:
《5个CSS3技术实现设计增强》
《一起感受HTML5和CSS3的能量》
《提升你设计水平的CSS3新技术》

1.CSS3实现钟表效果(基于jQuery)

　　使用CSS3的基本变形特性:rotate，并结合了jQuery这类javaScript框架制作的CSS3时钟效果。

2.模拟时钟

　　模拟时钟基于过渡webkit和CSS3变形，javascript用于将其按当前时间转动。

3.可使用箭头键旋转的3D立方体

　　你可以使用上、下、左、右方向键控制这个3D立方体，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。

4.多种3D立方体(淡入淡出)

　　多种3D立方体使用CSS3和它的属性‘transform’ 和 ‘transition’ ，我个人觉得效果很震撼，你能看到写在3D立方体上的透视感极强的文字。

5.CSS3手风琴效果

　　使用CSS3实现的手风琴菜单效果，基于webkit浏览器专有属性。

6.自动滚动视差效果

　　自动滚动视差效果使用WebKit的 CSS transition 属性。该效果无需JavaScript。

7.Isocube

　　Isocube有些类似于3D立方体，但也有不同之处，它可以让他片贴在立方体面。

8.CSS3图片集

9.CSS3 Matrix(黑客帝国效果)

　　黑客帝国是最棒的科幻小说改编电影之一，现在使用纯CSS就能实现电影中的矩阵效果。

10.7种CSS3结合javascript技术的特效

　　7种CSS3结合javascript技术的特效实例. 所包含的效果有淡入淡出, 震动, 轻移, 扩大, 跳动, 旋转 和 手风琴效果。

11.各种鼠标悬停图片特效

　　六个由CSS3替代JavaScript而实现的鼠标悬停图片效果，CSS3实现这种悬停效果依然很炫！

12.旋转的可口可乐易拉罐(使用滚动条控制)

13.3D 《宫女》

14.宝利来画廊

　　宝利来画廊是由CSS3技术实现的将一些照片堆在一起，有趣的是鼠标悬停照片是，照片会旋转并缓慢放大~

15.太空

16.Mac Dock

　　CSS3模拟的mac操作系统菜单…

17.Drop-In Modals

18.滑动的唱片

　　该效果使用了CSS3过渡和些许HTML，在它上面放一个唱片专辑会看上去更生动。

19.CSS3 Zooming Polaroids

　　该效果会将一个照片列表按顺序排列，并把它们按不同的角度旋转，使用了CSS2和CSS3技术，无JavaScript。它从图片的alt属性中读取出照片描述并放到了照片的下方。

20.CSS3 火箭动画

21.Poster Circle

22.变形的立方体

23.动画版宝丽来画廊

24.聚光灯下的投影效果

25.色彩鲜艳的时钟

26.Lightbox Gallery

27.弹性缩略图菜单

28.Coverflow

29.jQuery DJ Hero

30.Dynamic Stacking Cards

31.另一个CSS3图片画廊效果

32.雪堆(使用方向键控制)

33.CSS3动画版价格栏

34.平滑jQuery+CSS3菜单

35.CSS标签(无JavaScript)

36.CSS标签菜单(无JavaScript)

37.SVG+CSS3鱼眼菜单

38.CSS3落叶效果

39.CSS3旋转图集效果

40.CSS3下拉菜单

41.星球大战风格爬行文字(纯HTML+CSS)

42.CSS3即时贴

43.css3雪花

44.又一个鱼眼效果

45.CSS3逐帧动画

　　第一个CSS3逐帧动画实例需要你持续使用鼠标点击图片，当播放到最后一帧时它会自动播放第一帧，如此循环，但第一个实例只能在FireFox和Opera下实现。第二个Css3逐帧动画实例需要你使用鼠标在图片上移动，依旧是mousemove这个动作，只要鼠标在移动图片动画就会持续播放，但动画的播放速度是与你的鼠标移动速度有关的，该实例支持Safari, Google Chrome, IE8, Firefox 和 Opera。

46.全地域装甲载具

47.又一个CSS3手风琴效果

48.无Flash版动态展示

49.平滑菜单栏

50.loading旋转效果

留意更新

订阅彬Go以查看CSS3最新教程。

英文原文:50 Awesome Animations made with CSS3
翻译原文:用CSS3制作50个超棒动画效果教程(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/50-awesome-css3-animations.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

]]> http://blog.bingo929.com/50-awesome-css3-animations.html/feed 33 http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html#comments Mon, 21 Dec 2009 06:40:55 +0000 彬Go http://blog.bingo929.com/?p=2824

　　table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。

您还可以参考以下javascript相关资源:
《推荐9款很棒的网页绘制图表JavaScript框架脚本》
《了解jQuery技巧来提高你的代码》
《10种JavaScript特效实例让你的网站更吸引人》
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》

1.DataTables-强大的jQuery表格插件

　　DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。

2.uiTableFilter-jQuery表格过滤插件

　　uiTableFilter是一个用于表格行筛选的jQuery插件。插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。

3.Scrollable HTML Table-jQuery表格滚动插件

　　Scrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。

4.Tablesorter-jQuery表格排序插件

　　Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。

5.Flexigrid-Web2.0 jQuery表格插件

　　Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。

6.HeatColor-jQuery表格颜色插件

　　HeatColor可以让你根据元素的值来为元素设置颜色。 它的值的比对时根据预设的一个范围来进行比较，最后对他们自动进行颜色值的设置。

7.JQTreeTable-jQuery树形表格插件

　　使用JQTreeTable插件你可以得到一个树形表格，如果用户的浏览器禁用了JavaScript，那么他们也能看到普通形式的表格，并不影响可访问性。

8.Ingrid-jQuery表格插件

　　Ingrid是另一个数据表jQuery插件。它也有很多特性，比如列调整尺寸、排序、行列添加样式等。在作者网站提供了很棒的文档来告诉大家如何从头使用这个jQuery表格插件。

9.jQuery ColumnManager plugin

　　columnManager是可以控制任意表格列显示或隐藏的jQuery插件，而且它可以保存当前表格的状态至你下次访问。这个jQuery插件非常小巧轻量，仅3.6kb。

10.jQuery treeTable-jQuery树形表格插件

　　jQuery treeTable是小型的JQTreeTable, 它也能让你的table显示成树形结构. 这个插件也可以在浏览器禁用JavaScript时保持文档整洁并让原始table可以使用.

11.CSV2Table-CSV格式读取表格插件

　　CSV2Table 可以读取CSV文件，它从CSV文件中读取内容并创建成table表格.

12.Table Pagination-jQuery表格分页插件

　　这个jQuery表格分页插件可以在表格下面创建分页元素，你还可以通过各种设置来定制分页。

13.jQuery TableRowCheckboxToggle

　　这个jQuery表格插件可以让你再点击表格行的时候改变多选框状态并修改该行CSS样式。

14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件

　　这个简单的jQuery插件可以让用户使用拖拽行的方式重新排列表格各行，任意单独行可以设置为不可拖拽和/或不可放置。

15.uiTableEdit

　　uiTableEdit是由Greg Weber制作的很酷的jQuery表格编辑插件，它允许用户编辑表格内容。

留意更新

订阅彬Go以查看网页设计最新资源。

英文原文:15 Great jQuery Plugins For Better Table Manipulation
翻译原文:15款提高表格操作的jQuery插件(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

]]> http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html/feed 7