推荐阅读
用PS调出时尚冷色调效果的人像照片调色教程
很多同学们喜欢日系风格的照片啊，不管是日系小清新、还是日系胶片、日系电影感的照片，统统都很受欢迎，本篇教程呢通过PS教同学们调出日系JK制服电影感的照片，整个照片的色调偏暗，不是我们经常见的那种清新透亮的风格，但是又比较像日系电影的色调，有看日系电影的同学们应该会对这种色调很熟悉，具体如何制作，通过教程来学习一下吧。效果图：原图：前后对比图：
篆刻字效
本实例制作的是一种镂空的篆刻文字效果，这类文字可以应用于各种具有古典风格的设计作品中，效果如图8-72所示。图8-72 完成效果该例的制作是在一块红色图像上删除文字选区内的图像，获得镂空的文字效果，然后对红色图像进行修饰边缘、复制图像、模糊图像、更改图层混合模式的操作，获得最终的篆刻文字效果。制作流程如图8-73所示。图8-73 制作概览（1）启动Photoshop，执行菜单栏中的“文件”\“新建”命令，新建一个名为“篆刻字”的新文档，如图8-74所示。图8-74 “新建”对话框（2）在“图层”调板中单击“创建新的图层”按钮，新建“图层 1”。
认识InDesign的颜色模式
在本节中为读者介绍几种常见的颜色模式，如RGB（红色、绿色、蓝色）模式；CMYK（青色、洋红、黄色、黑色）模式和Lab模式等。懂得这些颜色模式和色彩知识，有助于对颜色的管理和设置。学习过Photoshop就会了解颜色模式。每种颜色模式都基于颜色模型或数学上定义的颜色空间。为了补偿人们对颜色信息的主观感知，每种颜色模式都将一定的颜色再现为二维或三维空间。在该空间中，每种颜色都以一套数学坐标的形式存在，而且与空间中点的坐标一一对应。这种方法使颜色信息可以在计算机、软件和外围设备间交流。RGB颜色模式用于复制可见光光谱，它被用来描述传送过滤色或感知光波的任何东西。所有的光线都不存在时为黑色；当光线越来越多时颜色也就会越来越亮，因此把该颜色模式称为加色法模式。RGB模式是最常用的颜色模式。一方面，这个模式可以显示非常广的色域对于高分辨率图像的编辑极为有用。另一方面，RGB模式是依赖于设备的，这就是说，它与颜色的数量定义无关，其显示的方式完全依赖于用来显示颜色的硬件，因此在多台设备上显示一致颜色几乎是不可能的。RGB颜色模式分为红、绿、蓝3种颜色，从无到完全显示的过程，通过0到255之间数值表示。因为RGB模式是以光的颜色为基础的，所以越大的RGB值对应的光量也越多。因此，较高的RGB值会产生较淡的颜色。RGB图像有3个8位通道，可以在屏幕上重新生成多达1670万种颜色的24位图像，这3个通道的名称为红色，绿色和蓝色，如图7-1所示。（在16位/通道的图像中，这些通道转换为每像素48位的颜色信息，具有再现更多颜色的能力。）图7-1 RGB颜色CMYK颜色模式使用4种颜色：青（C）、品红（M）、黄（Y）和黑（K）重现彩色照片。图7-2出示了CMYK颜色模式图。该颜色模式以打印在纸上的油墨对光线产生反射特性为基础产生的。当白光照射到半透明油墨上时，白光中的一部分颜色被吸收，而另一部分颜色被反射回眼睛。通过反射某些颜色的光，并吸收其它颜色的光，油墨就可以产生颜色。黑色的墨吸收的光最多。因为CMYK颜色模式是以墨的颜色为基础的，所以百分比越高的颜色越暗。要产生不同的颜色时，可减少混合原色量，因此被称为减色模式。
用CorelDRAW绘制矛盾空间实例
矛盾空间在三维世界中并不存在，是一种在二维空间中运用三维空间的平面表现形式错误的表现，由于其带给人的独特感觉，在平面设计中经常被使用。 矛盾空间看上去复杂，但使用CorelDRAW绘制起来却十分简单，本文将详细展示使用CorelDRAW绘制矛盾空间的过程。 1、打开CorelDRAW，使用椭圆工具，按住快捷键ctrl，绘制一个正圆形。绘制完成后按住shift将正圆形向中心缩小，缩小到一定程度后点击鼠标右键复制，全选两个图形点击上方的合并，此时得到一个圆环图形。 2、按住shift，将该图形水平向下移动，当移动时的蓝色图形的外圆的顶点与原图形内圆的顶点重合时点击鼠标右键复制。选中两个图形按下快捷键ctrl+c组合，此时得到一个由两个圆环组合而成的图形。如下图所示。 3、使用2点线工具。在该图形的两边各绘制一条直线。选中左边的直线与该图形，按下快捷键L使直线与该图形左对齐。选中右边的直线与该图形，按下快捷键R，使直线与该图形右对齐。 4、使用智能填充工具，如图4所示顺时针为该图形上方的三个部分填充颜色。填充完成后选中这三个填充了颜色的部分，点击上方的焊接。 5、如第4步，使用智能填充工具对该图形下方的三部分进行填色，填色完成焊接。 6、两条直线与该图形贴合处的小空隙也需要填色，填色完成后左边的空隙与图形上部分进行焊接，右边的空隙与下部分进行焊接。矛盾空间就完成了，此时可将不需要的线条删除。 7、接下来可根据自己的喜好与需要，通过改变颜色、调整形状大小等方式对矛盾空间进行调整。如图7，笔者将轮廓颜色改为白色，添加了渐变填充效果，降低了矛盾空间的高度。得到一个自己较为喜欢的效果 使用CorelDRAW绘制矛盾空间就是如此简单，只需要绘制出一个图形然后复制、合并、焊接、填色就好。此时展示的是圆环形矛盾空间的绘制方法，其它诸如三角形之类的矛盾空间的绘制方法的大同小异，大家可以尝试。
最新发布
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，看看能用这些函数做些什么。上面的例子中展示了绘制矩形是多么简单。