推荐阅读
CorelDRAW绘制绿色的森林一角场景
该实例制作了一幅森林场景画面，画面以绿色调为主，通过不同绿色之间的搭配关系营造出丰富的色彩关系。在处理手法上要注意表现画面的纵深感，并且要层次分明、主次有序。图3-2为本实例的完成效果。图3-2 本实例完成效果3.1.1 技术提示本实例的画面具有一定的纵深感，制作时通过为图形添加阴影效果，拉开了画面的层次，给人一种纵深的空间感。如图3-3所示，为本实例的制作流程。图3-3 本实例制作流程3.1.2 制作步骤：绘制远景植物(1)启动CorelDRAW，新建一个工作文档，在属性栏中将“微调偏移值”设为0.1mm，其他参数保持系统默认。然后使用“矩形”工具，在视图中绘制矩形。如图3-4所示。
Photoshop调出唯美冷色效果的外景人像
最终效果原图1、打开素材图片渐变映射调整图层，参数如下 选用较暖的明暗色作为叠加层，确定后把混合模式改为“叠加”，不透明度改为：30%，如下图。2、创建色彩平衡调整图层，参数及效果如下图。
(10-2):使用字符调板
1012以上是在文字工具的公共栏中出现的选项。在点击了字符调板按钮后即会出现字符调板【窗口_字符】，如下图。在其中可以对文字设定更多的选项。在实际使用中也很少直接在公共栏中更改选项，大多数都是通过字符调板完成对文字的调整的。其中的字体、字体形式、字号、颜色、抗锯齿选项就不重复介绍了。注意其中的为亚洲文本选项，需要在Photoshop首选项〖CTRL_K〗的常规选项中开启“显示亚洲文本选项”才会出现。1013拼写检查选项是针对不同的语言设置连字和拼写规则，如下右图显示了英国英语和美国英语对同样文字的不同连字方式。注意，末尾连字只有在框式文本输入时才有效。因为框式文本是自动换行的。通过手动换行的文字是不会有连字效果的。有关框式文本的输入方法在本节后面部分介绍。连字和拼写规则对于中文是没有意义的。因为汉字为单体结构，即一个汉字字符已携带完整含义，而字母系语言需要多个字符组合才能携带完整含义。也正是因为汉字携带的信息巨大，因此现在电脑的计算能力还不足以完美处理中文化的信息结构。-1014行间距控制文字行之间的距离，若设为自动，间距将会跟随字号的改变而改变，若为固定的数值时则不会。因此如果手动指定了行间距，在更改字号后一般也要再次指定行间距。如果间距设置过小就可能造成行与行的重叠。如下左图是自动行距与手动指定为12像素行距的比较。如果有重叠发生，下一行文字将会遮盖上一行。1015竖向缩放相当于将字体变高或变矮，横向缩放相当于变胖和变瘦，数值小于100%为缩小，大于100%为放大。如下右图中3个字分别为标准、竖向50%、横向50%的效果。-1016在字符调板中有比例间距和字符间距，它们的作用都是更改字符与字符之间的距离，但在原理和效果上却不相同。我们可以动手来理解它们的区别，新建一个足够大的图像，打上simple这几个字母，字体为黑体，大小为72像素。如下图左端所示，我们看到整个文字的宽度是由字符本身的字宽与字符之间的距离构成的。这两者都是在制作字体的时候就定义好的。有的字符本身较窄，但其左右的字距也较大，这样做是为了保证每个字符占用的宽度一致。否则，较窄的字符就只能占用较小的宽度。但这种设计却也造成了字符之间疏密不同。如下图中的mp之间与pl之间的疏密就不同。这种情况一般出现在使用中文字库输入字母的时候，Windows系统自带的黑体、宋体、楷体字体都存在这种现象。因此输入英文时应避免使用这些字体。字宽与字距间的比例将随着字号的大小相应改变，也就是说，对于同一个字体来说，字号越大，字符之间的距离也越大。反而反之。那么，字符间距选项的作用相当于对所有字距增加或减少一个相同的数量。可手动输入数值。如下图中将字符间距减去100，所有的字符间距都减去100，字符就互相靠拢了。但是这样做并没有改变疏密不同的情况，尽管mp已经是互相紧靠着密不透风，但pl还是有很大的距离。当然，如果继续减少字符间距也可以最终令pl之间也“密不透风”(设为-300左右)，但mp之间却会产生重叠的效果了。我们可以用一个简单的算式来理解：假设mp原来的距离为100，pl之间的距离为300，当字符宽度设置为-100的时候，mp之间的距离为0，pl之间的距离还有200。要令pl之间的距离为0，字符宽度必须设置为-300，但同时mp的距离必须为-200，所以mp产生了重叠的现象。比例间距选项的作用是同比例地减少(注意，只能是减少而不能增大)字符的间距。按照上一个算式中的前提来假设计算的话就是：当比例间距设为50%，相当于所有字符间距减半(mp间距为50，pl间距为150)，当设为33%的时候，所有字符间距减为原先的三分之一(mp间距约为30，pl间距为100)，当设为100%的时候，所有字符的间距就都被降为0了。因此我们看到的效果是所有字符都彼此依靠(抗锯齿选项及字体形式的不同可能带来微小差异)。1017间距微调选项是用来调整两个字符之间的距离，使用方法与字符间距选项相同。但其只能针对某两个字符之间的距离有效。因此只有当文本输入光标置于字符之间时，这个选项才能使用。1018竖向偏移(也称基线偏移)的作用是将字符上下调整，常用来制作上标和下标。正数为上升，负数为下降。一般来说作为上下标的字符应使用较小的字号。如下图。1019强迫形式的名称是我们为了与文字形式相区别而起的，它的作用也和文字形式一样是将字体作加粗、加斜等效果，但选项更多。即使字体本身不支持改变形式，在这里也可以强迫指定。它与字体形式可以同时使用，效果加倍(更斜、更粗)。其中的全部大写字母选项的作用是将文本中的所有小写字母都转换为大写字母。而小型大写字母选项的作用也是将所有小写字母转为大写，但转换后的大写字母将参照原有小写字母的大小。如下图所示。上标与下标选项的作用与竖向偏移类似，就是增加了可同时缩小字号的功能。下划线选项与删除线选项的作用是在字体下方及中部产生一条横线。
用PS完美抠出复杂的羽毛头饰的简单教程
打开如下图片，复制图层，将 背景 层锁定。我们将在复制层进行抠图，隐藏背景层。选择 >> 色彩范围，打开色彩范围窗口，选择最左边的吸管工具并点击图像背景，这时在色彩范围窗口中你会发现被选择部分变成了白色，移动颜色容差滑杆，使得图像大部分区域变成黑色，并且背景易于选取。提示：要添加颜色到选区时，应使用中间的吸管工具点击要添加的色彩部分2 获得选区，在通道面板中，按下“将选区存储为通道”按钮，得到一alpha通道，取消选择（Ctrl+D），点击“Alpha 1”层，这时图像变成黑白色。提示：图像中的黑色区域是我们要保留的部分，白色为要扣除的部3 这时我们发现图像中还有部分灰色区域，这些将成为半透明区域，所以必须将他们调整为纯黑色或纯白色。图像 >> 调整 >> 色阶，打开色阶窗口，由左向右拖动黑色滑杆直到灰色区域变为纯黑色为止。由右向左移动白色滑杆将白色区域变的更清晰4 选择黑色笔刷并提高笔刷边缘硬度，涂抹需要保留的区域，用白色笔刷涂抹羽毛边缘，根据涂抹区域大小的不同使用不同粗细的笔刷
最新发布
Data URI和MHTML完整解决所有浏览器
Data URIData URI 是由 RFC 2397 定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中：data:[<MIME-type>][;base64],<data>在上个世纪 HTML4.01引入了Data URI方案 ，到今天为止除了IE6和IE7之外，所有主流浏览器都支持，但IE8对Data URI的支持还是有限制的，只支持object（仅是图片时）、img、input type=image、link和CSS中的URL，且数据量不能大于32K。优点：缺点：MHTMLMHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的缩写，是由RFC 2557定义的把一个多媒体的页面所有内容都保存到同一个文档解决方案。这个方案是由微软提出从IE5.0开始支持，另外Opera9.0也开始支持，Safari可以把文件保存为.mht（MHTML文件的后缀）格式，但不支持显示它。MHTML和Data URI还比较类似，有更强大的功能和更复杂的语法，并且没有Data URI中“无法被重复利用”的缺点，但MHTML使用起来不够灵活方便，比如对资源引用的URL在mht文件中可以是相对地址，否则必须是绝对地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析，如果不修改Content-type则需要使用MHTML协议，这个时候必须使用绝对路径，如《MHTML – when you need data: URIs in IE7 and under》。应用
HTML 5 Reset Stylesheet
这份css reset是在Eric Meyers的 CSS reset基础上修改出来的，特别针对HTML5调整了相应标签的初始化样式。/*html5doctor.com Reset Stylesheetv1.42009-07-27Author: Richard Clark - http://richclarkdesign.com*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}body { line-height:1;}article, aside, dialog, figure, footer, header,hgroup, nav, section { display:block;}nav ul { list-style:none;}blockquote, q { quotes:none;}blockquote:before, blockquote:after,q:before, q:after { content:”; content:none;}a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent;}ins { background-color:#ff9; color:#000; text-decoration:none;}mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
HTML5 File API改善网页上传功能
HTML 5 让 HTML 这个一度单纯的置标语言焕发出成熟的魅力，使之成为 Web 开发者的强力工具。 近日W3C又推出一个新草案——HTML5 File API，这个 API 将让大大改善基于Web 的文件上传操作，甚至可以实现直接将文件从桌面拖放至Web。 该草案使用 <input type="file" /> 实现文件的上传，而其对应的 API 为开发者提供了操控上传数据与上传进度的机制。不过，目前对该 API 提供支持的浏览器还少得可怜，真正支持的浏览器似乎只有 Firefox 3.6。如果使用最新的 Firefox 3.6 版，可以在演示页体验文件拖放式上传。 同时，该 API 还许诺将为 Web 程序提供一种机制，使得文件上传操作接近桌面程序的体验，同时拖放多个文件到 Web 并单独显示每个上传进程的进度状态。
W3C推荐的 DTDs(文件类型声明)
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult. To ease the work, below is a list of recommended declarations that you can use in your Web documents.Use the following markup as a template to create a new XHTML 1.0 document using a proper DOCTYPE. See the list below if you wish to use another document type.<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <p>… Your HTML content here …</p> </body> </html> DTD List HTML 4.01 - Strict, Transitional, Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 - Strict, Transitional, Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 - DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML Basic 1.0 - DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> XHTML Basic 1.1 - DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> HTML 2.0 - DTD: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> HTML 3.2 - DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> MathML 1.01 - DTD: <!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd"> MathML 2.0 - DTD: <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd"> XHTML + MathML + SVG - DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> SVG 1.0 - DTD: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> SVG 1.1 Full - DTD: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> SVG 1.1 Basic - DTD: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd"> SVG 1.1 Tiny - DTD: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> XHTML + MathML + SVG Profile (XHTML as the host language) - DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> XHTML + MathML + SVG Profile (Using SVG as the host) - DTD: <!DOCTYPE svg:svg PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> List of DTDs for the CSS validator. Authoring tools MUST NOT use the following list.
学习如何书写整洁规范的HTML标记
良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候, 我总是首先告诉他们: 良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？ 整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。让我们来看一些写得并不友好的HTML标记, 并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。破洛洛注: Chris Cyier在这里使用了两个文档来进行本文的代码说明: bad code 和 good code 。大家学习的时候请参考着这两个文件。我们要做到这一点，只需要按正确的步骤来做即可. 没必要去讨论是否使用HTML 4.01或 XHTML 1.0，两者都对我们书写正确的代码提出了严格的要求。但无论如何我们的代码不应该使用任何Tables表格来进行布局， 所以也就没必要使用Transitional DOCTYPE.相关资源:破洛洛注: 所谓的DTD就是文档类型声明，简单来说，就是对特定文档所定义的一些规则，这些规则包括一系列的元素和实体的声明。XHTML文档类型有三种: STRICT（严格类型）, TRANSITIONAL（过渡类型）和 FRAMESET（框架类型）。目前，我们使用最多的是TRANSITIONAL，比如本站目前也是使用 XHTML 1.0 TRANSITIONAL。如果你的HTML代码书写的还算良好，那把现有的TRANSITIONAL 转为STRICT还是比较方便的。反之，也不用太急着转，个人觉得，STRICT更严谨，但用TRANSITIONAL也并没有太大影响。在我们的 <head> 部份, 第一件事情就是声明字符集. 我们使用了UTF-8, 但是把它放到了 <title>后面. 让我们把字符集声明移动到最上面，因为我们要让浏览器在阅读任何内容之前就应该知道以何种字符集来进行处理。
6个不常用HTML标记使用说明
HTML标签众多，在HTML手册里你可以都查到。但有的HTML标签你可能从未使用过。不是因为你欠缺学习精神，而是它们确实用处不大。如果你有探索精神，那就接着往下看吧。第一个：<abbr> 或 <acronym>这两个标识是一回事，主要是用于一些英语的缩写，当你把鼠标移上去的时候，你会发现会出现一个小提示来提示缩写的全称。下面是一个示例： 第二个：<q>这个标识主要就是把引用的文字加上双引号，这个标识看来好像很没有什么意思。官方说是为了方便，可我总觉得这个标识还不如直接输入双引号来的方便。好像的确没什么。难道这个标识只能在Firefox下看到，IE就不支持了。下面是个示例：这个是一句引言这个是一句引言 第三个，<bdo>这个标识很有意思，可以把从左到右的字序全部反转过来。比如：May I help you sir ? 如果加上了这个标识后，就是下面这个样子：May I help you sir ?什么事可以为你效劳啊？ 第四个，<del>为你的字符串加上删除线。如：这是一段删除文字。这是一段删除文字 第五、六个，<sub><sup>这两个是下标和上标。下面是示例：这是一个下标，这是一个上标。
网页制作:HTML代码编写的30条技巧
本文总结了30条HTML代码编写指南，只要在编写HTML代码的过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。在以往的页面源代码里，经常看到这样的语句： <li>Some text here. <li>Some new text here. <li>You get the idea. 也许过去我们可以容忍这样的非闭合HTML标签，但在今天的标准来看，这是非常不可取的，是必须百分百避免的。一定要注意闭合你的HTML标签，否则将无法通过验证，并且容易出现一些难以预见的问题。最好使用这样的形式： <ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul> 2. 声明正确的文档类型( DocType ) 笔者早先曾加入过许多CSS论坛，在那里，如果有用户遇到问题，我们会建议他首先做两件事：DOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合出现，这样浏览器才能正确的解析标记。通常有四种文档类型可供选择： 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。当你在埋头写代码时，可能会经常顺手或偷懒的加上一点嵌入式css代码，就象这样： <p style="color: red;">破洛洛</p> 这样看起来即方便又没有问题，但是它会在你得代码中产生问题。
Canvas教程(4):Using images应用图像
One of the more fun features of the canvas is the abillity to use images. These can be used to do dynamic photo compositing or used as backdrops of graphs etc. It's currently also the only way to add text to them (The specification does not contain any functions to draw text). External images can be used in any format supported by Gecko (e.g. PNG, GIF or JPEG format). Other canvas elements on the same page can also be used as the source.Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。Importing images is basically a two step process:引入图像只需要简单的两步：Let's look at step one first. There are basically four options available:先来看看第一步，基本上有四种可选方式：We can access all images on a page by using either the document.images collection, the document.getElementsByTagName method, or if we know the ID attribute of the image, the document.getElementById method.我们可以通过 document.images 集合、document.getElementsByTagName 方法又或者 document.getElementById 方法来获取页面内的图片（如果已知图片元素的 ID。Just as with normal images we access other canvas elements using either the document.getElementsByTagName method or the document.getElementById method. Make sure you've drawn something to the source canvas before using it in your target canvas.和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。
Canvas教程(3):Drawing shapes绘制图形
Before we can start drawing, we need to talk about the canvas grid or coordinate space. The HTML template on the previous page had a canvas element 150 pixels wide and 150 pixels high. I've drawn this image with the default grid overlayed. Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner (coordinate (0,0)). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top (coordinate (x,y)). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it. For now we'll stick to the default.在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。Unlike SVG, canvas only supports one primitive shape - rectangles. All other shapes must be created by combining one or more paths. Luckily, we have a collection of path drawing functions which make it possible to compose very complex shapes.不像 SVG，canvas 只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成。还好，有一组路径绘制函数让我们可以绘制相当复杂的形状。First let's look at the rectangle. There are three functions that draw rectangles on the canvas:我们首先看看矩形吧，有三个函数用于绘制矩形的：fillRect(x,y,width,height) : Draws a filled rectanglestrokeRect(x,y,width,height) : Draws a rectangular outlineclearRect(x,y,width,height) : Clears the specified area and makes it fully transparentEach of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height are pretty obvious. Let's see these functions in action.它们都接受四个参数， x 和 y 指定矩形左上角(相对于原点)的位置，width 和 height 是矩形的宽和高。好，实战一下吧。Below is the draw() function from the previous page, but now I've added the three functions above.
HTML 5 canvas 基本语法
5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 提供图形绘制功能。 提供图形绘制功能。 5 规范引进了很多新特性，其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas ：本文介绍 2D canvas基础以及如何使用基本 canvas 函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解 JavaScript 基础知识。可以点击此处批量下载本文实例代码创建 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 部分中，或者放在外部文件中。介绍了如何创建 canvas 后，让我们来看看 2D canvas API，看看能用这些函数做些什么。上面的例子中展示了绘制矩形是多么简单。