摘要
Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。而作为下一代互联网标准，HTML5自然也是备受期待和瞩目。HTML5是近十年来Web开发标准巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的新使命是将Web 带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。现阶段对于HTML5技术的研发和开发工作主要集中在技术草案的确立与新互联网应用的开发上，而随着互联网的发展，HTML标准也在不断变化，HTML标准已经走过第4代了，因为它能够用简单的标签元素，代替属性能实现之前需要用很多复杂JavaScript 代码才能有实现的功能，HTML5越来越受到欢迎。
HTML5带来很多令人激动的新特性，这在之前的HTML中是不可见到的。其中一个最值得提及的特性就是用于绘画的HTML Canvas，可以对2D或位图进行动态、脚本的渲染。本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在实现过程中也利用了最新的CSS3技术。
本文针对其引入的Canvas绘图元素进行了深入的研究，此元素可以替代画图作为动画渲染的工具，效率与安全性更高，开发更便捷，必将是以后的动画，游戏等应用首选的开发方式，前景非常好。
【关键词】Web2.0 HTML5 CSS3 Canvas
ABSTRACT
Web2.0 brings a wealth of Internet technology for all to enjoy the fun of technology development and experience progress. As a next-generation Internet standard, HTML5 is naturally highly anticipated and attention. HTML5 is a huge leap over the past decade Web development standards. Unlike the previous version,HTML5 is not just used to represent Web content, its new mission is the Web into a full-fledged application platform, HTML5 platform, video, audio, image, animation, and interaction with the computer be standardized. At this stage for the HTML5 technology and development work focused on the establishment of the draft technology and new Internet application development, HTML standards are changing with the development of the Internet, HTML standard has gone through four generations, because it simple label elements, instead of before the property can be realized with a lot of complex JavaScript code in order to achieve the functions, HTML5 has been more popular.
HTML5 brings a lot of exciting new features. This is not seen in the previous HTML. One of the most worth mentioning the characteristics is HTML Canvas for painting, 2D or bitmap rendering of dynamic script. I detailed analysis the HTML5 technology introduction and development prospects, a deeper look into the core of the introduction of HTML5 tag Canvas element, the Canvas can be achieved, based on the a similar Windows drawing board, including pencil, stamp imitation, draw a straight line, circle, rectangle, eraser, background image, take a swatch in the realization of the process also takes advantage of the latest CSS3 techniques.
This paper introduces the Canvas drawing elements which conducted research, this element can replace the drawing as a tool for animation rendering, higher efficiency and security, the development of more convenient, be the future animation, games and other application development method of choice , the outlook is very good.
【Key words】WEB2.0 HTML5 CSS3 Canvas
目录
前言 (1)
第一章关于HTML5和画图板 (2)
第一节HTML5简介 (2)
第二节HTML5特性 (2)
第三节HTML5国内外发展现状 (3)
第四节画图工具 (4)
第二章相关技术简介 (5)
第一节Canvas元素简介 (5)
第二节第一个Canvas程序的实现 (5)
第三节JavaScript及jQuery简介 (7)
第四节CSS3简介 (9)
第五节开发工具DreamWeaver介绍 (12)
第六节调试工具Firefox及Firebug简介 (13)
第三章功能设计 (16)
第一节需求设计 (16)
第二节基本原理 (17)
第三节布局及界面设计 (19)
第四节JavaScript设计 (20)
第四章功能的实现 (21)
第一节简单功能的实现 (21)
第二节前台显示实现 (24)
第三节JavaScript画图实现 (25)
第四节最终效果 (32)
第五节不足之处 (38)
第五章结束语 (39)
参考文献 (41)
前言
随着互联网时代的高速发展，上网早已经成为人民日常生活中一个必不可少的部分，人们可以在网络上获取信息，甚至于在网络上完成日常的正常生活。看新闻，看电视，订餐等等。
HTML的上个版本早在1999年制定，随着21世纪网络的不断发展，已经不能适应当前的需求，于是HTML5营运而生了。HTML5是HTML下一个的主要修订版本，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，现仍处于发展阶段。它希望能够减少浏览器对丰富性网络应用服务的插件的需要，并且提供更多能有效增强网络应用的标准集。
HTML5的出现再次告诉我们，我们的生活，日常办公，越来越有可能全在网页端实现了。如今很多人喜欢在电脑上绘图，画图版作为一个日常的生活工具，如今也能在我们网页端实现了。HTML5一个很有用实用的特性是用于绘画的Canvas元素，Canvas拥有许多绘制功能如画笔、矩形、圆形、字符以及图像处理的方法，他为人们在网页绘图及图像处理带来了方便。
第一章关于HTML5和画图板
第一节HTML5简介
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group （Web超文本应用技术工作组，WHATWG）的组织。WHATWG 致力于Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟）专注于XHTML 2.0。在2006 年，双方决定进行合作，来创建一个新版本的HTML。
HTML5 草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML 工作团队。
HTML5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
HTML5提供了一些新的元素和属性，例如
第二节HTML5特性
一、取消了一些过时的HTML4标记
其中包括纯粹显示效果的标记，如和
新的HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用DIV。
二、将内容和展示分离
b 和i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。
三、一些全新的表单输入对象
包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。
四、全新的，更合理的Tag
多媒体对象将不再全部绑定在object或embed Tag 中，而是视频有视频的Tag，音频有音频的Tag。
五、本地数据库
这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。
六、Canvas 对象
将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。
七、浏览器中的真正程序
将提供API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。
第三节HTML5国内外发展现状
国内市场支持HTML5标准的浏览器已经从2010年的不到2%发展到2012年超过三成的比例，2013年这一比例将有望突破突破70%。越来越多PC浏览器开始重视并且支持HTML5发展的同时，HTML5也越来越受到移动互联网的重视。
相对于PC 平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较
少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比PC 更快，硬件支持和浏览器的状况都要比PC平台的状况更好。移动平台上主流的 5 款浏览器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0)，目前对标准的支持度均高于60%。其中表现居首的是Chrome for Android，而支持度相对较低的Android 系统自带的浏览器Android Browser 对HTML5 的支持度也在60%以上。
此外，硬件加速促进了HTML5标准的发展和应用。在使用HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用HTML5 动画、Canvas、WebGL 究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。国内的有360 安全浏览器、搜狗浏览器以及QQ 浏览器。手机系统情况也比较乐观，主流的智能手机系统iOS、Android 以及Windows Phone 上的原生浏览器都已经支持硬件加速。Android 4.0+上的Chrome在硬件加速方面更是超越了原生浏览器的表现。
2012 年12 月17日，W3C 发布了HTML5 以及Canvas 2D 两个标准的完全定义版本，标志着HTML5 的标准已经在趋向稳定。在2013年，支持HTML5 的PC 浏览器将会有一个较大的增长。除Chrome、Firefox 之外，微软推出的IE9、IE10 对HTML5 的支持度都大幅提升，相信HTML5 大面积使用只是时间问题。此外，移动平台的HTML5比PC 平台发展的更快。由于移动设备的更新换代速达远远超过PC，而且硬件性能也能够完全支持HTML5。
许多大公司在HTML5 Canvas开发上下足了功夫，2013年或成为HTML5更普及的一年。
第四节画图工具
画图板简单灵巧，深得广大用户的喜爱，其占用资源少、操作简单、功能等特点为用户的小型图形开发工作带来了很多便利。当用户要处理一些要求不是很高的工作时，可以利用画图的工具来完成，比如实现一些简单的操作如画直线，图片等功能。
用过微软Windows操作系统的人一定都对Windows自带的画图板非常的熟悉，它虽然不及Photoshop的功能强大、内容丰富，但是作为Windows一直以来都内带的附件程序，它具有小巧玲珑、简单实用等其它绘图软件所不具备的优点。同时它的风格也被许多其它绘图软件所效仿。
Windows 画图程序一直伴随着Windows 各个版本，这个很简单，几乎没有什么用处的程序拥有最基本的绘图功能，很适合用来涂鸦。HTML5 的Canvas 对象使在线绘图成为可能，虽然HTML5 还远未成熟，但很多人已经迫不及待地用它设计一些让人惊叹的应用。
第二章相关技术简介
第一节Canvas元素简介
Canvas元素最先由苹果公司的Safari浏览器引入，后来Chrome和Firefox也都支持了这一元素，目前该元素已被加入HTML5标准的草案，并且得到了所有主流浏览器的支持。
HTML5 的Canvas 元素使用JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
向HTML5 页面添加Canvas 元素并规定元素的ID、宽度和高度：
这样就可创建Canvas元素。
第二节第一个Canvas程序的实现
这个Canvas 的宽度和高度均为400 像素，边框为黄色，背景为蓝色。Canvas 上没有任何实际绘图。绘图通过属于Canvas 的JavaScript 方法完成。
下面我们介绍下Canvas的方法：
表2.1 Canvas方法介绍方法用途
getContext(contextId) 公开在Canvas 上绘图需要的API。惟一（当前）可用的contextID 是2d。
height 设置Canvas 的高度。默认值是150 像素。width 设置Canvas 的宽度。默认值是300 像素。
createLinearGradient(x 1,y1,x2,y2) 创建一个线性渐变。起始坐标为x1,y1，结束坐标为x2,y2。
createRadialGradient(x 1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是x1,y1，半径为r1。圆圈的结束坐标为x2,y2，半径为r2。
addColorStop(offset,col or) 向一个渐变添加一个颜色停止。颜色停止（color stop）是渐变中颜色更改发生的位置。offset 必须介于0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色在这里就例如说，fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色在这里就例如说，fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于x 和y，宽度和高度分别为w 和h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于x 和y，宽度和高度分别为w 和h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标x,y。
lineTo(x,y) 从绘图方法结束的最后位置到x,y 绘制一条直线。
Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript 内部完成：
JavaScript 使用ID 来寻找Canvas 元素：
var c=document.getElementById("mycanvas");
然后，创建context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，目前还没有3d的对象。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect (0, 0, 150, 75);
fillStyle 方法将方块染成了红色，fillRect 则方法规定了形状、位置和尺寸。相类似的就可以通过浏览器提供的基础方法，构建出激动人心的应用。
第三节JavaScript及jQuery简介
JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。由于AJAX的出现，JavaScript的功能被越来越多的丰富，能做的事情也越来越多，是Web2.0时代的象征。
一个完整的JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。
JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的JS库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery 使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML 内容分离，也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义id即可。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery包含以下特点：
①动态特效；
②异步的AJAX；
③通过插件来扩展；
④方便的工具- 例如浏览器版本判断；
⑤渐进增强；
⑥链式调用；
⑦多浏览器支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+；
jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有Media Temple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下：
最常使用的jQuery基础方法是.ready()方法：
$(document).ready (function () {
//script goes here
});
或者其简写：
$(function () {
//script goes here
});
当DOM加载完就可以执行（比window.onload更早），在同一个页面里可以多次出现.ready()。
实例：为元素添加单击事件，发生对象隐藏效果。
If you click on me, I will disappear.
结果：隐藏页面内的
标签。
选择器：
jQuery 使用sizzle引擎，支持CSS选取，Xpath选取等方式。以下列举了几个特征：$("p") 选取全部
元素；
$("p.intro") 选取所有包含class为"intro"的
元素；
$("#demo") 选取id为"demo" 的元素；
$("[href]") 选取所有带有href 属性的元素；
$("[href='#']") 选取所有带有href 值等于"#" 的元素；
$("[href!='#']") 选取所有带有href 值不等于"#" 的元素；
$("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素；
$("[href^='/imgaes/']") 选取所有href 值以/imgaes/" 开头的元素；
更多详细信息请参见jQuery API的Selectors部分。
事件处理：
直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。
$("#button").click (function () {
//script goes here
});
用on来绑定事件，off来解绑事件，第一个参数为事件名，第二个参数为回调函数。1.7.2版本开始支持。
$("#button").onclick (function (){
//script goes here
});
在1.7.1或更早版本，需要用bind/unbind（常规绑定），live/die（预绑定）来替代on/off。更多详细信息请参见jQuery API的Events部分。
动态特效：
$("#msg").show ("fast");
$("#msg").hide ("slow");
$("#msg").fadeIn ();
$("#msg").fadeOut ();
以上代码实现一个ID为Msg的jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。更多详细信息请参见jQuery API 的Effects部分。
第四节CSS3简介
CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3
是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
CSS3带来无与伦比的页面表现能力，而这些在以前只能靠图片，多层的标签嵌套或者JS才能实现，现在只需要几行CSS3就能实现，效率也比原来要高很多。
一、布局
Grid布局应用很广泛，最简单的例子就是内容的分栏显示。
对于这个布局复杂的三栏网页来说，如果使用CSS3Grid布局的话，我们只需这样写：body {columns:3;column-gap:0.5in;}
img {float:pagetopright;width:3gr;}
其中，body部分声明页面为3栏，栏间距为0.5英寸；img中float属性指明图片浮动位置为页面的右上角，而宽度为3个栏宽。只需这样两行CSS，就可以实现这个复杂布局。
二、边框
border-color：控制边框颜色，并且有了更大的灵活性，可以产生渐变效果；
border-image：控制边框图象；
border-corner-image：控制边框边角的图象；
border-radius：能产生类似圆角矩形的效果；
三、背景
background-origin：决定了背景在盒模型中的初始位置，提供了3个值，border, padding 和content；
border：控制背景起始于左上角的边框；
padding：控制背景起始于左上角的留白；
content：控制背景起始于左上角的内容；
background-clip：决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding；
border：会覆盖住背景；
padding：不会覆盖背景；
background-size：可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定；
multiple backgrounds：多重背景图象，可以把不同背景图象只放到一个块元素里。
四、特性
①圆角表格，对应属性：border-radius。
②以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。
③丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。
④在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。
五、颜色
HSL colors：除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如HSL（0,100%, 50%）。
HSLA colors：加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla （0,100%,50%,0.2）。
Opacity：直接控制不透明度，用0到1之间的数来表示。
RGBA colors：和HSLA colors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。实现这样的效果非常简单，设置颜色的时候我们使用标准的RGBA（）单位即可，例如RGBA （255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。经过测试Firefox3.0、Safari3.2、Opera10都支持了RGBA单位。
Resize：可以由用户自己调整DIV的大小，有horizontal（水平）vertical（垂直）或者both （同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局。
六、文字效果
text-shadow：文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text-overflow：当文字溢出时，用“…”提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。
七、选择器
CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如：nth-child()
等。
Attribute selectors：在属性中可以加入通配符，包括^,$,*等；
[att^=val]：表示开始字符是val的att属性；
[att$=val]：表示结束字符是val的att属性；
[att*=val]：表示包含至少有一个val的att属性。
其它模块：
media queries：感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页；
multi-column layout：多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值；
column-width：指定每列宽度；
column-count：指定列数；
column-gap：指定每列之间的间距；
column-rule-color：控制列间的颜色；
column-rule-style：控制列间的样式；
column-rule-width：控制列间的宽度；
column-space-distribution：平均分配列间距。
八、影响
CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。
第五节开发工具DreamWeaver介绍
DreamWeaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia 被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览。
Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然
顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML 支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。
第六节调试工具Firefox及Firebug简介
Firefox（火狐）是一款著名的浏览器软件，由美国Mozilla与开源团体共同开发。Firefox 适用于Windows、Linux和MacOS X平台，它体积小速度快，主要特性有：自由开源、标签式浏览、安全保护、立体搜索等。
Firefox从发行初期就开始屡获殊荣，下载数量持续增加，市场占有率不断攀高。根据Netapplication调研网站的最新数据，到2012年10月份，Firefox在全球的市场占有率达到19.99%。
Firefox在刚推出的时候是世界上最先进的浏览器，当时出现了很多网页都只支持Firefox 浏览器，以至于其他浏览器为了适应这些网站，直到现在，几乎所有的UserAgent都以Mozilla/5.0开头。
Firebug是网页浏览器Mozilla Firefox 下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和AJAX的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。例如Yahoo!
的网页速度优化建议工具YSlow。
Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、DOM 以及JavaScript 代码。
Firebug的CSS调试器是专为网页设计师们量身定做的。
如今的网页设计言必称DIV+CSS，如果你是用Table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用DIV做出来的页面的确能精简HTML代码，HTML 标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。
Firebug的JavaScript调试器是一个很不错的JavaScript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。
如果你有一个网站已经建成，然而它的JavaScript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步的来排除问题。
控制台能够显示当前页面中的JavaScript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试AJAX应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post 出去的参数、URL，HTTP头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。
Firebug强大的HTML代码查看器，相比于Firefox自带的HTML查看器，它的功能强大了许多。
DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下Tab键就能补齐为document.getElementById，非常方便。如果你认为补齐得不够理想，按下Shift+Tab会恢复原状。用了Firebug的DOM查看器，你的JavaScript从此找到了驱使对象，Web开发也许就成了一件乐事。
第三章功能设计
网页画图板主要用于基础绘画、对图片涂鸦等。
总体的设计思路是在一个网页中添加一个DIV 层，然后在这个DIV层中添加Canvas 元素作为他的基础画板，再在此基础上实现画图工具功能（例如铅笔、放射线、直线、圆、矩形、取色器、线条大小、橡皮擦、文字等）。
点击画笔按钮是自由绘画状态，可以用鼠标自由绘画；分别点击直线、圆、矩形按钮绘制出相应的图像；点击取色器弹出一个浮动层，该浮动层中也包含一个Canvas 元素，绘制出取色板的各种颜色，通过点击取色器区域获取各个颜色值。按下线条大小按钮，可以用于设置线条的粗细值。
第一节需求设计
需求分析是一个软件的基础。如果没有正确的需求分析就不能做出满意的软件。所以可以说需求分析是一个软件设计的灵魂。所以在任何系统的开发设计之前，都应该进行相应的需求分析。需求分析的准确度越高，开发出来的程序稳靠性越强，所需的费用将会越低。反过来呢，做出来的程序安全系数不高，还会额外增加开发费用，造成人力物力资源的严重浪费。而得不偿失。
我们作的是布局类似与Windows画图板，在设计时应该考虑到用户的需要和画图的习惯。可以想象的是，用户喜欢的是简洁，方便并且具有实用性的画图板程序，所以我们需求分析的主要任务就是来了解用户画图时的习惯。尽量让用户满意。在此我们是先设计一个大概的程序模型让别人试我的画图板。用这种方法我们收集到了用户的画图习惯。并以此来设计自己的画图板。
在通过对用户的调查，对已经知道的画图板程序的了解过后，这个系统所要实现的功能如下：
①设置图片url可读取图片并设置为当前画布的背景。
②颜色选择器：可以选择绘画使用的各种颜色。
③粗细选择器：可以选择画线的粗细。
④铅笔：可以跟随鼠标画线。
⑤直线：可以根据鼠标拖动画直线。
⑥圆形：可以根据鼠标拖动画圆。
⑦矩形：可以根据鼠标拖动画矩形。
⑧放射形：可以根据鼠标拖动画出放射线。
⑨仿制图章：可以根据鼠标拖动画出相应图片。
⑩ 取色器：可以获取画布中的颜色。
图3.1 需求图
第二节 基本原理
画图板制作的基本原理是通过鼠标点击画板坐标完成的，下图是他的原理图
画图板
路径载入
打开
绘图
设置
画笔粗细 画笔颜色
画笔
圆
矩形 直线
橡皮擦 放射线
图章
当鼠标按下时
画图坐标开始
鼠标移动画图
图3.2 原理图
鼠标松开结束
图 3.2 原理图鼠标移动无效
图3.2 原理图