HTML5 Canvas 起步(1) – 基本概念

什么是Canvas

<canvas> 是一个新的 HTML 元素,这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在草稿阶段,正式发布也许要等到2010年,不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等,因此,在运行本页中的例子时,请确保你使用的是上述浏览器之一。

尽管在 Mozilla 已经有不少关于 Canvas 的教程,我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白,那么你可以在参考资料中找到 Mozilla 网站上 Canvas 教程的链接。

另外,可以在这里找到一些有趣的 Canvas 示例。

开始使用 Canvas

使用 Canvas 很简单,与使用其他 HTML 元素一样,只需要在页面中添加一个 <canvas> 标签即可:

<canvas id="screen" width="400" height="400"></canvas>

当然,这样只是简单的创建了一个 …

阅读全文 »

“云端的编辑器”,10 步安装 Bespin Development Server(Python版)

Mozilla Labs 在今年情人节那天发布了一个叫 Bespin 的编辑器,这是一个基于网络的可扩展文本编辑器,按照现在流行的说法,就是“云编辑”了。并且,这个编辑器是开源的。

图片附件

Bespin 是基于 Canvas 的,因此目前它只支持少数浏览器,其中包括 Firefox 3+、Safari 4 以及 Chrome 2 开发版,因此,如果要使用 Bespin 的话,你必须使用这几款浏览器中的一种。

要体验 Bespin,可以直接在 bespin.mozilla.com 注册一个帐号并且登录,不过目前 bespin.mozilla.com 所用的代码并不是最新版本的,线上使用的代码有许多不完善之处。因此,除了使用 Mozilla Labs 官方的 Bespin 站点,我们也可以从 Mozilla Labs 下载 Bespin 源代码,并在本地搭建 Bespin 服务,从而可以体验 Mozilla Labs 最新的开发成果。

注意,这篇文章并不介绍怎么去使用 Bespin,而是介绍怎么样去配置一个可以在本地运行的 Bespin 服务器,因此,如果你需要了解怎么去使用这个编辑器,可以参阅 Mozilla Labs 上的文档,或者等我再写一篇使用 Bespin …

阅读全文 »

YUI学习笔记(4)

YUI学习笔记(4)

by xujiwei (http://www.xujiwei.com/)

YAHOO.util.Subscriber 与 YAHOO.util.CustomEvent。

1. YAHOO.util.Subscriber (event.js)

这 应该算是设计模式中的观察者模式了,Subscriber 订阅一个事件,在 Publisher 触发那个事件后,会逐个通知 Subscriber。

对 于一般开发者来说,并不需要去关心 Subscriber 的实现,因为 Subscriber 主要是 CustomEvent 用来分发动作以及删 除 Subscriber 的。

Subscriber 类只定义了 3 个属性:fn、obj 以及 override,3 个方 法:getScope、contains、toString,其中 fn 为订阅者的回调函数,obj 为要传递给回调函数的一个额外参 数,override 如果是布尔型的 true 值,那么表示使用 obj 属性为回调函数执行时的上下文,或者直接使用一个对象来作为回调函数执行的 上下文。

Subscriber 的 3 …

阅读全文 »

YUI学习笔记(3)

YUI学习笔记(3)

by xujiwei (http://www.xujiwei.com/)

YAHOO.lang.later,YAHOO.lang.trim,YAHOO.lang.isXXX 以及 YAHOO.lang.hasOwnProperty。

1. YAHOO.lang.later(yahoo/yahoo.js)

later 方法用来延迟执行方法,是对 setInterval 和 setTimeout 的封装,并且可以传递参数到延迟执行的函数或者使用参数数组批量执行指定的函数。

later 方法的签名为:

later: function(when, o, fn, data, periodic)

when 是用来指定在多长时间后执行指定的函数,以毫秒计算;

o 是上下文对象,即在要执行的函数里使用 this 是会引用这个 o 对象;

fn 就是要延迟执行的函数了,可以传递一个函数引用,也可以传递一个字符串,later 方法会在 o 对象中查找对应名称的属性来做为要执行的方法;

data 就是传递给延迟执行的函数的参数了,可以为一个参数,或者是一个参数数组,那么如果我们要传递的参数本身就是一个数组的话,就要自己先把这个参数数组包装成一个数组;

peridoic 参数是一个布尔值,用来表示延迟执行的函数是否需要周期执行而不是只执行一次。

later 方法执行后会返回一个对象,包含了一个名 interval 的属性用来表示函数是以 setInterval 来执行的还是以 setTimeout 来执行的,以及一个方法 



阅读全文 »

YUI学习笔记(2)

YUI学习笔记(2)

by xujiwei (http://www.xujiwei.com/)

YAHOO.lang.dump 与 YAHOO.lang.substitute。

1. YAHOO.lang.dump(yahoo.js)

dump 方法用来将一个对象转储为一个字符串,并且可以指定转储的深度。

在 dump 过程中,对于基础类型例如 Number、String、Boolean,是直接返回字符串的,对 HTMLElement 对象是返回 HTMLElement 本身,也就是不做处理,对于函数 Function 则是返回字符串“f(){...}”。

对于数组,dump 返回的格式就如我们定义时一样“[item1, item2 item3, ...]”,对于对象 Object,则是使用键值对的形式“key => value”,与 PHP 里面的数组定义方式相似。

例如一个对象定义如下:

var obj = {
num: 1,
str: "string",
bool: true,
date: new Date(),
obj: {
obj_num: 


阅读全文 »

YUI学习笔记(1)

YUI学习笔记(1)

by xujiwei (http://www.xujiwei.com/)

今天开始学习 YUI,加强一下对 JavaScript 的理解。

1. 命名空间 YAHOO.namespace(yahoo.js)

YUI 中使用了命名空间的概念,在 JS 中使用命名空间是为了模块以及代码组织清晰的需要,通过使用命名空间可以将功能相似或同一模块中的函数、变量等放到同一个命名空间下。

其实 JS 中的命名空间就是一个嵌套的对象而已,即子命名空间相当于父命名空间中的一个属性,它本身也是一个对象,这样子命名空间也可以有自己的子命名空间。

在 YUI 中,命名空间的格式与 C# 中类似,是以点号分隔的字符串,可以使用 YAHOO 对象的静态方法 namespace 来创建命名空间,需要注意的是,以 namespace 方法创建命名空间时,所有的对象都是附加在 YAHOO 这个对象上的,如果调用 namespace 方法创建一个“com.xujiwei.ajax”这样的命名空间,其中 ajax 的完整路径将是 YAHOO.com.xujiwei.ajax,而不是 com.xujiwei.ajax,也就是说 namespace 不会产生新的顶层对象,一切以 YAHOO 对象为基础。

namespace 方法接受一个或多个字符串来生成命名空间,但是它只返回最后一个参数所代表的命名空间的最后一个域的对象,例如使用 namespace("com.xujiwei.js", "com.xujiwei.ajax") 时它的返回值是代表 js 



阅读全文 »

Learn HTTP 1.1 Status Code Part.5

Learn HTTP 1.1 Status Code Part.5

by xujiwei(http://www.xujiwei.com/)

前一篇介绍了 4xx 系列状态码 中 406 到 417,这篇接着讲剩下的 5xx 系列。

7. 5xx 系列内部服务器错误

在 服务器处理请求时出问题了,服务器可以发一个 5xx 系列错误码给客户端,表示服务器在处理请求的时候出问题了,问题是出在服务器身上而不是客户端身 上。另外,服务器如果发送了 5xx 系列的状态码,除非客户端是使用的 HEAD 方法,否则服务器还应该在响应中给出错误的描述、原因以及解决方法 等,客户端可以把这些东西给用户看,让用户知道是什么原因导致了请求出错。

不过通常情况下,用户在收到 5xx 系列错误码的同时,是不会 收到导致错误的详细技术信息的,这是为了保护服务端程序安全的需要。服务器一般会返回一个页面描述所出的错误是由什么原因引起的,而不涉及详细技术信息。 例如在 ASP.NET 中,可以在 web.config 中的 customErrors 节配置自定义错误的显示方式,有 On、Off、 RemoteOnly 三种方式,可以根据具体的需要来设置,像 RemoteOnly 就会给本地开发者显示详细的错误信息以及调试信息,而对远程访问 者则会只显示服务器运行时出现错误,没有详细的调试信息。…

阅读全文 »

Learn HTTP 1.1 Status Code Part.4

Learn HTTP 1.1 Status Code Part.4

by xujiwei(http://www.xujiwei.com/)

前一篇介绍了 4xx 系列状态码 中 400 到 405,这篇接着讲剩下的 4xx 系列。

6.7. 406 Not Acceptable

客 户端在收到 406 Not Acceptable 状态码时,一般是因为服务器在处理客户端请求时,找不到对应客户端发送过来的请求头部 的 Accept 字段中列举的响应类型的响应内容,例如使用 Ajax 时,如果通信数据格式选择 json,发送请求时头部 Accept 字段一般 会设置为 application/json,但是如果服务端并不支持 json,那么服务端可以发送一个 406 Not Acceptable,同时 也应该在 Content-Type 字段中指定客户端所请求的资源的格式,这时客户端可以考虑使用另外的格式来接收响应。

不过备注中说 到,如果没有合适的资源来响应客户端的请求,HTTP 1.1 …

阅读全文 »

Learn HTTP 1.1 Status Code Part. 3

Learn 1.1 HTTP Status Code Part.3

by xujiwei(http://www.xujiwei.com/)

前一篇介绍了 3xx 系列状态码,这一篇介绍 4xx 客户端错误系列。

6. 客户端错误 4xx 系列状态码

4xx 系列状态码可以算是对用户来说相当熟悉的一类状态码,这个系列的状态码通常都会带一段描述信息来描述服务端在处理请求时出现了什么状况,用户能直观地看到服务端返回的信息,而不像 3xx 系列,浏览器会自动处理那些个状态码,不需要用户的参与。

但是 4xx 系列状态码之间的区别只是它所代表的意义不同,它们的表现形式是可以随心所欲的,例如一些著名站点的 404 页面都是精心设计过的。

6.1. 400 Bad Request

请求格式错误,这可能存在于客户端构造的 HTTP 头不符合要求等,这时服务端会返回一个 400 Bad Request,而客户端在不修改请求数据的情况,不可以再次发送这个请求。

6.2. 401 Unauthorized

未授权错误,用于 HTTP 认证。如果客户端请求的资源需要认证,那么服务端可以响应一个 401 Unauthorized,同时在头部添加一个 WWW-Authenticate 字段表示认证方式,客户端在收到 401 



阅读全文 »

Learn HTTP 1.1 Status Code Part.2

Learn HTTP 1.1 Status Code Part.2

by xujiwei(http://www.xujiwei.com/)

前一篇介绍了 2xx 系列状态码,这一篇介绍 3xx 重定向系列。

5 重定向 3xx 系列状态码

3xx 系列状态码一般是用来作为重定向的,并且在重定向的过程中,一般不需要用户的参与,也就是说,重定向的过程是由浏览器来控制的。但是如果重定向后的请求的方法不是 GET 或 HEAD 的话,还是需要用户参与的,不过也许仅仅是确认一下是否同意发送数据而已:)

另外,开发者要注意的是,RFC2616 Section 10.3 的备注中提到了在前一版本的 HTTP 协议中建议最大重定向次数为 5 次,也就是说,客户端可能只跟踪 5 次重定向,如果超过 5 次重定向,那么可能客户端就会把第 5 次重定向后得到的结果做为最终结果。这时,客户端得到的可能就是一个错误的结果,这就是开发者不愿看到的,那么在开发时,就应该尽量控制重定向次数在 5 次以内。

5.1  300 Multiple Choices

300 Multiple Choices,字面意思是多重选择,表示请求的这个地址具有多个资源可以响应。客户端在遇到 



阅读全文 »