彬Go

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

彬Go — Sun, 11 Dec 2011 23:30:11 +0800

　　早在公元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拖拽事件传递的文件信息。很显然，我们这里会用到后者。

var fileList = e.dataTransfer.files;

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

var fileNum = fileList.length;

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

//检测是否是拖拽文件到页面的操作
if (fileList.length === 0) {return;};
//检测文件是不是图片
if (fileList[0].type.indexOf('image') === -1) {return;}

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

　　这里有一个简单的拖拽图片预览的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对象中即可：

var xhr = new XMLHttpRequest();
var url = 'http://upload.renren.com/......';
var boundary = '-----------------------' + new Date().getTime();
var fileName = file.name;

xhr.open("post", url, true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

if (window.FormData) {
　//Chrome12+
　var formData = new FormData();
　formData.append('file', file);
　formData.append('hostid', userId);
　formData.append('requestToken', t);

　data = formData;
} else if (file.getAsBinary) {
　//FireFox 3.6+
　data = "--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"" +
　'file' +
　"\"; " +
　"filename=\"" +
　unescape(encodeURIComponent(file.name)) +
　"\"" +
　crlf +
　"Content-Type: image/jpeg" +
　crlf +
　crlf +
　file.getAsBinary() +
　crlf +
　"--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"hostid\"" +
　crlf +
　crlf +
　userId +
　crlf +
　"--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"requestToken\"" +
　crlf +
　crlf +
　t +
　crlf +
　"--" +
　boundary +
　'--';
}

xhr.send(data);

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

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

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

-------------------------1323611763556
Content-Disposition: form-data; name="file"; filename="4.jpg"
Content-Type: image/jpeg

ÿØÿà�2JFIF�2...这里是文件二进制流...~iú2oî5P22%-vãîHü 4QHgÿÙ
-------------------------1323611763556
Content-Disposition: form-data; name="hostid"

229421603
-----------------------------1323612996486

Content-Disposition: form-data; name="requestToken"

369009193
-------------------------1323611763556--

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

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

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

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

留意更新

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

转载声明:
原载:彬Go——关注前端开发 & Web UI设计
本文链接:http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

人人网FED团队招聘前端工程师(长期有效)

彬Go — Thu, 01 Sep 2011 14:43:51 +0800

前端工程师（javascript）

工作地点：北京
性别：不限
要求：
精通HTML DOM对象的Javascript编程，熟悉对象化Javascript编程
有使用js框架经验，了解不同浏览器之间的差异，写出的代码具有良好的兼容性
掌握XHTML、CSS，对W3C有较深理解
了解web后端开发，熟悉至少一门后端语言
熟练阅读英文技术文档

前端工程师（xhtml/css方向）

工作地点：北京
性别：不限
要求：
精通各种Web前端技术，包括XHTML/XML/CSS，了解不同浏览器之间的差异，写出的代码具有良好的兼容性（至少兼容3种以上浏览器内核）
深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验
对各种前端技术有一定了解和关注，并对前端开发工作有持续热情
熟练阅读英文技术文档
如果你有js， flash等相关技术的开发经验或参与过大型web应用的开发，那么你在应聘时会占有很大优势

申请职位请将简历发邮件到：skar9363@gmail.com
QQ: 215392

给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)

彬Go — Tue, 11 Jan 2011 15:36:35 +0800

　　上周六有幸同我们人人网的几个同事一起去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部分：

var oDragMe = document.getElementById('dragMe');

oDragMe.addEventListener('dragstart', function(e) {
　　e.dataTransfer.setData('text/plain', e.target.getAttribute('builddate'));
},false)

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

var oDropBox = document.getElementById('dropHere'),
　　tmpData;

oDropBox .addEventListener('drop', function(e) {
　　tmpData = e.dataTransfer.getData('text/plain');
},false)

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

oDropBox .addEventListener('dragover', function(e) {
　　e.stopPropagation();
e.preventDefault();
},false)

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

FileReader获取本地拖拽文件

点击查看实例Demo

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

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

[Constructor]
interface FileReader {

// 异步读取方法
void readAsArrayBuffer(in Blob blob);
void readAsBinaryString(in Blob blob);
void readAsText(in Blob blob, [Optional] in DOMString encoding);
void readAsDataURL(in Blob blob);

void abort();

// 状态
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;

readonly attribute unsigned short readyState;

// 文件或二进制数据
readonly attribute any result;

readonly attribute FileError error;

// 事件处理
attribute Function onloadstart;
attribute Function onprogress;
attribute Function onload;
attribute Function onabort;
attribute Function onerror;
attribute Function onloadend;

};
FileReader implements EventTarget;

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

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

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

//一定要在dragover事件中取消默认拖拽行为，不然drop事件会失效
oDropBox.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
oDropBox.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
　　e.stopPropagation();
　　e.preventDefault();

　　var fileList = e.dataTransfer.files,　　//获取拖拽文件
　　　　oImg = document.createElement('img'),
　　　　reader = new FileReader();

　　reader.onload = function(e) {
　　　　oImg.src = this.result;
　　　　oDropBox.appendChild(oImg);
　　}
　　reader.readAsDataURL(fileList[0]);　　//这里只取拖拽的第一个，实际中你可以遍历处理file列表
｝

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

《我日》Demo 预览

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

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

留意更新

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

转载声明:
原载:彬Go——关注前端开发 & Web UI设计
本文链接:http://blog.bingo929.com/google-enjoy-html5-drag-drop-filereader.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

规范自己的JavaScript书写 – Dojo Javascript 编程规范

彬Go — Mon, 25 Oct 2010 15:46:49 +0800

前言

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

序

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

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

快读参考

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

结构	规则	注释
模块	小写	不要使用多重语义（Never multiple words）
类	骆驼
公有方法	混合	其他的外部调用也可以使用 lower_case()，这样的风格
公有变量	混合
常量	骆驼或大写

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

结构	规则
私有方法	混合，例子：`_mixedCase`
私有变量	混合，例子：`_mixedCase`
方法（method）参数	混合，例子：`_mixedCase, mixedCase`
本地（local）变量	混合，例子：`_mixedCase, mixedCase`

命名规范

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

Account, EventHandler

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

var NodeTypes = {
Element : 1,
DOCUMENT: 2
}

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

getInnerHtml(), getXml(), XmlDocument

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

obj.getSomeValue()

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

var MyClass = function(){
var _buffer;
this.doSomething = function(){
};
}

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

this._somePrivateVariable = statement;

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

setTopic(topic) // 变量 topic 为 Topic 类型的变量

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

getHandler(); // 避免使用 getEventHandler()

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

MouseEventHandler

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

dojo.events.mouse.Handler // 而非 dojo.events.mouse.MouseEventHandler

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

特殊命名规范

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

文件

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

// vim:ts=4:noet:tw=0:

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

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

var someExpression = Expression1
+ Expression2
+ Expression3;

var o = someObject.get(
Expression1,
Expression2,
Expression3
);

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

变量

变量必须在声明初始化以后才能使用，即便是 NULL 类型。
变量不能产生歧义。
相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
变量应该尽量保持最小的生存周期。
循环/重复变量的规范：

只有循环控制块的话，则必须使用 FOR 循环。
循环变量应该在循环开始前就被初始化；如使用 FOR 循环，则使用 FOR 语句初始化循环变量。
“do … while” 语句是被允许的。
“break” 和 “continue” 语句仍然允许使用（但请注意）。

条件表达式

应该尽量避免复杂的条件表达式，如有必要可以使用临时布尔变量。
The nominal case SHOULD be put in the “if” part and the exception in the “else” part of an “if” statement.
应避免在条件表达式中加入块。

杂项

尽量避免幻数（Magic numbers），他们应该使用常量来代替。
浮点变量必须指明小数点后一位（即使是 0）。
浮点变量必须指明实部，即使它们为零（使用 0. 开头）。

布局

块

普通代码段应该看起来如下：

while (!isDone){
doSomething();
isDone = moreToDo();
}
IF 语句应该看起来像这样：

if (someCondition){
statements;
} else if (someOtherCondition){
statements;
} else {
statements;
}
FOR 语句应该看起来像这样：

for (initialization; condition; update){
statements;
}
WHILE 语句应该看起来像这样：

while (!isDone) {
doSomething();
isDone = moreToDo();
}
DO … WHILE 语句应该看起来像这样：

do {
statements;
} while (condition);
SWITCH 语句应该看起来像这样：

switch (condition) {
case ABC:
statements;
// fallthrough
case DEF:
statements;
break;
default:
statements;
break;
}
TRY … CATCH 语句应该看起来像这样：

try {
statements;
} catch(ex) {
statements;
} finally {
statements;
}
单行的 IF – ELSE，WHILE 或者 FOR 语句也必须加入括号，不过他们可以这样写：

if (condition){ statement; }
while (condition){ statement; }
for (intialization; condition; update){ statement; }

空白

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

注释

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

文档

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

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

基本函数信息

function(){
// summary: Soon we will have enough treasure to rule all of New Jersey.
// description: Or we could just get a new roomate.
// Look, you go find him. He don't yell at you.
// All I ever try to do is make him smile and sing around
// him and dance around him and he just lays into me.
// He told me to get in the freezer 'cause there was a carnival in there.
// returns: Look, a Bananarama tape!
}

对象函数信息

没有返回值描述

{
// summary: Dingle, engage the rainbow machine!
// description:
// Tell you what, I wish I was--oh my g--that beam,
// coming up like that, the speed, you might wanna adjust that.
// It really did a number on my back, there. I mean, and I don't
// wanna say whiplash, just yet, cause that's a little too far,
// but, you're insured, right?
}

函数的声明

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

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

dojo.declare(
"foo",
null,
{
// summary: Phew, this sure is relaxing, Frylock.
// description:
// Thousands of years ago, before the dawn of
// man as we knew him, there was Sir Santa of Claus: an
// ape-like creature making crude and pointless toys out
// of dino-bones, hurling them at chimp-like creatures with
// crinkled hands regardless of how they behaved the
// previous year.
// returns: Unless Carl pays tribute to the Elfin Elders in space.
}
);

<h3>参数</h3>
<ol>
<li>简单类型
　　　简单的类型的参数可以直接在函数参数定义中注释说明。
[cc lang="javascript"]function(/*String*/ foo, /*int*/ bar)...

可变类型参数
　　下面是几个修饰符供参考：

? 可选参数
… 说面参数范围不确定
数组

function(/*String?*/ foo, /*int...*/ bar, /*String[]*/ baz)...

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

基本信息格式为： *关键字* 描述字段（ *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

人人网招聘前端架构师、Javascript开发工程师

彬Go — Tue, 24 Aug 2010 13:20:16 +0800

JavaScript开发工程师

工作地点：北京

招聘人数：2人

性别：不限

年龄：22-30

学历：本科及以上

要求：
　　精通HTML DOM对象的Javascript编程，熟悉对象化Javascript编程
　　有使用js框架经验，了解不同浏览器之间的差异，写出的代码具有良好的兼容性
　　掌握XHTML、CSS，对W3C有较深理解
　　了解web后端开发，熟悉至少一门后端语言
　　熟练阅读英文技术文档

前端架构师

工作地点：北京

性别/年龄：不限

学历：本科及以上

工作职责：
　　负责网站整体前端框架的设计、搭建
　　负责前端开发标准、规范的制定
　　能够深入了解后端架构，为项目提供最优化的技术解决方案
　　关注性能，能够为全站性能提升、技术运用合理性给出专业指导意见，勤于技术创新、勤于布道

职位要求：
　　3年以上web开发和前端开发经验，有大型网站的前端架构实践经验
　　精通各种前端框架，深入了解其开发思想以及应用范围，有独立开发框架经验
　　至少精通一门web前端脚本语言，有项目经验，熟悉Linux，了解设计模式
　　善于沟通，乐于分享

申请职位请发邮件到：qiang.yan@opi-corp.com

如果你有以上没有提到的任何技能，都是你的优势。如果你觉得自己够强大，够靠谱，够热情，你可以忽略以上描述，直接来和我们面谈。我们注重技术，但更注重人。

HTML5 WebSockets 基础使用教程

彬Go — Tue, 10 Aug 2010 01:30:28 +0800

　　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>
<p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

<input id="text" type="text" />
<button id="disconnect">Disconnect</button>

</div>

</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浏览器页面的链接。

　　如你所见，如果用户浏览器支持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

　　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()函数：

下面我们需要：

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
如需转载必须以链接形式注明原载或原文地址，谢谢合作

HTML5和CSS3工具资源汇总

彬Go — Mon, 28 Jun 2010 20:37:05 +0800

　　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
如需转载必须以链接形式注明原载或原文地址，谢谢合作

关于HTML 5 canvas 的基础教程

彬Go — Wed, 16 Jun 2010 01:31:30 +0800

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

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

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

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

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 && 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 < 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 < 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：
在线工程和演示

小节

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

本文转自：operachina

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

彬Go

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

HTML5 Drag&Drop 拖拽事件

获取文件数据 HTML5 File API

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

留意更新

人人网FED团队 招聘前端工程师(长期有效)

前端工程师（javascript）

前端工程师（xhtml/css方向）

给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)

Google HTML5 训练营

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

FileReader获取本地拖拽文件

留意更新

规范自己的JavaScript书写 – Dojo Javascript 编程规范

前言

序

快读参考

命名规范

特殊命名规范

文件

变量

布局

块

空白

注释

文档

基本函数信息

对象函数信息

函数的声明

变量

对象中的变量注释

返回值

伪代码（有待讨论）

人人网招聘 前端架构师、Javascript开发工程师

JavaScript开发工程师

前端架构师

HTML5 WebSockets 基础使用教程

什么是WebSockets？

WebSockets将会替代什么？

第一步：搞定WebSocket服务器

启动Apache服务器

第二步：修改URLs和端口

第三步：开始创建客户端

第四步：添加一些CSS

第五步：WebSocket事件

第六步：JavaScript

目前的成果

第七步：发送数据

关闭Socket

完整JavaScript代码

第九步：运行WebSocket服务器

大功告成！

留意更新

HTML5和CSS3工具资源汇总

留意更新

关于HTML 5 canvas 的基础教程

目录

canvas 基础

2D context API

基本线条

路径

插入图像

像素级操作

文字

阴影

颜色渐变

canvas 演示

小节

人人网FED团队招聘前端工程师(长期有效)

人人网招聘前端架构师、Javascript开发工程师