基于HTML5-Canvas的画图板设计与实现_第1页
基于HTML5-Canvas的画图板设计与实现_第2页
基于HTML5-Canvas的画图板设计与实现_第3页
基于HTML5-Canvas的画图板设计与实现_第4页
基于HTML5-Canvas的画图板设计与实现_第5页
已阅读5页，还剩34页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

-1-前言随着互联网时代的高速发展，上网早已经成为人民日常生活中一个必不可少的部分，人们可以在网络上获取信息，甚至于在网络上完成日常的正常生活。看新闻，看电视，订餐等等。HTML的上个版本早在1999年制定，随着21世纪网络的不断发展，已经不能适应当前的需求，于是HTML5营运而生了。HTML5是HTML下一个的主要修订版本，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，现仍处于发展阶段。它希望能够减少浏览器对丰富性网络应用服务的插件的需要，并且提供更多能有效增强网络应用的标准集。HTML5的出现再次告诉我们，我们的生活，日常办公，越来越有可能全在网页端实现了。如今很多人喜欢在电脑上绘图，画图版作为一个日常的生活工具，如今也能在我们网页端实现了。HTML5一个很有用实用的特性是用于绘画的Canvas元素，Canvas拥有许多绘制功能如画笔、矩形、圆形、字符以及图像处理的方法，他为人们在网页绘图及图像处理带来了方便。

第一章关于HTML5和画图板第一节HTML5简介HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组，WHATWG）的组织。WHATWG致力于Web表单和应用程序，而W3C（WorldWideWebConsortium，万维网联盟）专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5草案的前身名为WebApplications1.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提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。第二节HTML5特性一、取消了一些过时的HTML4标记其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。新的HTML5吸取了XHTML2一些建议，包括一些用来改善文档结构的功能，比如，新的HTML标签header,footer,dialog,aside,figure等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用DIV。二、将内容和展示分离b和i标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike这些标签则被完全去掉了。三、一些全新的表单输入对象包括日期，URL，Email地址，其它的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。四、全新的，更合理的Tag多媒体对象将不再全部绑定在object或embedTag中，而是视频有视频的Tag，音频有音频的Tag。五、本地数据库这个功能将内嵌一个本地的SQL数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web程序也将因此获益匪浅。不需要插件的富动画。六、Canvas对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。七、浏览器中的真正程序将提供API实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag将被剔除，而使用CSS。第三节HTML5国内外发展现状国内市场支持HTML5标准的浏览器已经从2010年的不到2%发展到2012年超过三成的比例，2013年这一比例将有望突破突破70%。越来越多PC浏览器开始重视并且支持HTML5发展的同时，HTML5也越来越受到移动互联网的重视。相对于PC平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比PC更快，硬件支持和浏览器的状况都要比PC平台的状况更好。移动平台上主流的5款浏览器(iOSSafari6.0、AndroidBrowser4.1、OperaMobile12.1、ChromeforAndroid18.0、FirefoxforAndroid15.0)，目前对标准的支持度均高于60%。其中表现居首的是ChromeforAndroid，而支持度相对较低的Android系统自带的浏览器AndroidBrowser对HTML5的支持度也在60%以上。此外，硬件加速促进了HTML5标准的发展和应用。在使用HTML5开发时，开发者经常会谈到的一个问题就是性能。使用HTML5动画、Canvas、WebGL究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对HTML5的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome18+、Firefox4+、IE9+、Safari5.1+、Opera12+。国内的有360安全浏览器、搜狗浏览器以及QQ浏览器。手机系统情况也比较乐观，主流的智能手机系统iOS、Android以及WindowsPhone上的原生浏览器都已经支持硬件加速。Android4.0+上的Chrome在硬件加速方面更是超越了原生浏览器的表现。2012年12月17日，W3C发布了HTML5以及Canvas2D两个标准的完全定义版本，标志着HTML5的标准已经在趋向稳定。在2013年，支持HTML5的PC浏览器将会有一个较大的增长。除Chrome、Firefox之外，微软推出的IE9、IE10对HTML5的支持度都大幅提升，相信HTML5大面积使用只是时间问题。此外，移动平台的HTML5比PC平台发展的更快。由于移动设备的更新换代速达远远超过PC，而且硬件性能也能够完全支持HTML5。许多大公司在HTML5Canvas开发上下足了功夫，2013年或成为HTML5更普及的一年。第四节画图工具画图板简单灵巧，深得广大用户的喜爱，其占用资源少、操作简单、功能等特点为用户的小型图形开发工作带来了很多便利。当用户要处理一些要求不是很高的工作时，可以利用画图的工具来完成，比如实现一些简单的操作如画直线，图片，图片图片等功能。用过微软Windows操作系统的人一定都对Windows自带的画图板非常的熟悉。同图像处理软件界的“大哥大”Photoshop比起来，它虽然不及Photoshop的功能强大、内容丰富，但是作为Windows一直以来都内带的附件程序，它具有小巧玲珑、简单实用等其它绘图软件所不具备的优点。同时它的风格也被许多其它绘图软件所效仿。Windows画图程序一直伴随着Windows各个版本，这个很简单，几乎没有什么用处的程序拥有最基本的绘图功能，很适合用来涂鸦。HTML5的Canvas对象使在线绘图成为可能，虽然HTML5还远未成熟，但很多人已经迫不及待地用它设计一些让人惊叹的应用。

第二章相关技术简介第一节Canvas元素简介Canvas元素最先由苹果公司的Safari浏览器引入，后来Chrome和Firefox也都支持了这一元素，目前该元素已被加入HTML5标准的草案，并且得到了所有主流浏览器的支持。HTML5的Canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。向HTML5页面添加Canvas元素并规定元素的ID、宽度和高度：<canvasid="mycanvas"width="200"height="100"></canvas>这样就可创建Canvas元素。第二节第一个Canvas程序的实现<!DOCTYPEhtml><html><head><title>HTML5CanvasDemo</title></head><body><divstyle="margin-left:30px;"><canvasid="mycanvasTag"width="400"height="400"style="background-color:blue;border:10pxyellowsolid"></canvas><br/><ahref="index.html">back</a></div></body></html>这个Canvas的宽度和高度均为400像素，边框为黄色，背景为蓝色。Canvas上没有任何实际绘图。绘图通过属于Canvas的JavaScript方法完成。下面我们介绍下Canvas的方法：表2.1Canvas方法介绍方法用途getContext(contextId)公开在Canvas上绘图需要的API。惟一（当前）可用的contextID是2d。height设置Canvas的高度。默认值是150像素。width设置Canvas的宽度。默认值是300像素。createLinearGradient(x1,y1,x2,y2)创建一个线性渐变。起始坐标为x1,y1，结束坐标为x2,y2。createRadialGradient(x1,y1,r1,x2,y2,r2)创建一个放射状渐变。圆圈的起始坐标是x1,y1，半径为r1。圆圈的结束坐标为x2,y2，半径为r2。addColorStop(offset,color)向一个渐变添加一个颜色停止。颜色停止（colorstop）是渐变中颜色更改发生的位置。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内部完成：<scripttype="text/javascript">varc=document.getElementById("mycanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>JavaScript使用ID来寻找Canvas元素：varc=document.getElementById("mycanvas");然后，创建context对象：varcxt=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）、文档对象模型（DocumentObjectModel，简称DOM）、浏览器对象模型（BrowserObjectModel，简称BOM）。JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的JS库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML内容分离，也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义id即可。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery包含以下特点：①动态特效；②异步的AJAX；③通过插件来扩展；④方便的工具-例如浏览器版本判断；⑤渐进增强；⑥链式调用；⑦多浏览器支持InternetExplorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+；jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有MediaTemple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下：<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>目前的版本是1.9.0（截止2013年1月）。最常使用的jQuery基础方法是.ready()方法：$(document).ready(function(){//scriptgoeshere});或者其简写：$(function(){//scriptgoeshere});当DOM加载完就可以执行（比window.onload更早），在同一个页面里可以多次出现.ready()。实例：为元素添加单击事件，发生对象隐藏效果。<html><head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>Ifyouclickonme,Iwilldisappear.</p></body></html>结果：隐藏页面内的<p>标签。选择器：jQuery使用sizzle引擎，支持CSS选取，Xpath选取等方式。以下列举了几个特征：$("p")选取全部<p>元素；$("ro")选取所有包含class为"intro"的<p>元素；$("#demo")选取id为"demo"的元素；$("[href]")选取所有带有href属性的元素；$("[href='#']")选取所有带有href值等于"#"的元素；$("[href!='#']")选取所有带有href值不等于"#"的元素；$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素；$("[href^='/imgaes/']")选取所有href值以/imgaes/"开头的元素；更多详细信息请参见jQueryAPI的Selectors部分。事件处理：直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。$("#button").click(function(){//scriptgoeshere});用on来绑定事件，off来解绑事件，第一个参数为事件名，第二个参数为回调函数。1.7.2版本开始支持。$("#button").onclick(function(){//scriptgoeshere});在1.7.1或更早版本，需要用bind/unbind（常规绑定），live/die（预绑定）来替代on/off。更多详细信息请参见jQueryAPI的Events部分。动态特效：$("#msg").show("fast");$("#msg").hide("slow");$("#msg").fadeIn();$("#msg").fadeOut();以上代码实现一个ID为Msg的jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。更多详细信息请参见jQueryAPI的Effects部分。第四节CSS3简介CSS即层叠样式表（CascadingStylesheet）。在网页制作时采用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的位置决定；multiplebackgrounds：多重背景图象，可以把不同背景图象只放到一个块元素里。特性①圆角表格，对应属性：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。五、颜色HSLcolors：除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如HSL（0,100%,50%）。HSLAcolors：加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）。Opacity：直接控制不透明度，用0到1之间的数来表示。RGBAcolors：和HSLAcolors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用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：文字投影，可能是因为MACOSX的Safari浏览器开始支持投影才特意增加的。text-overflow：当文字溢出时，用“…”提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。七、选择器CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如：nth-child()等。Attributeselectors：在属性中可以加入通配符，包括^,$,*等；[att^=val]：表示开始字符是val的att属性；[att$=val]：表示结束字符是val的att属性；[att*=val]：表示包含至少有一个val的att属性。其它模块：mediaqueries：感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页；multi-columnlayout：多列布局，让文字以多列显示，包括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能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。第六节调试工具Firefox及Firebug简介Firefox（火狐）是一款著名的浏览器软件，由美国Mozilla与开源团体共同开发。Firefox适用于Windows、Linux和MacOSX平台，它体积小速度快，主要特性有：自由开源、标签式浏览、安全保护、立体搜索等。Firefox从发行初期就开始屡获殊荣，下载数量持续增加，市场占有率不断攀高。根据Netapplication调研网站的最新数据，到2012年10月份，Firefox在全球的市场占有率达到19.99%。Firefox在刚推出的时候是世界上最先进的浏览器，当时出现了很多网页都只支持Firefox浏览器，以至于其他浏览器为了适应这些网站，直到现在，几乎所有的UserAgent都以Mozilla/5.0开头。Firebug是网页浏览器MozillaFirefox下的一款开发类插件，现属于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的网络监视器同样是功能强大的，它能将页面中的CSS、JavaScript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。Firebug的JavaScript调试器是一个很不错的JavaScript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。如果你有一个网站已经建成，然而它的JavaScript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步的来排除问题。控制台能够显示当前页面中的JavaScript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试AJAX应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，HTTP头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。DOM(DocumentObjectModel)里头包含了大量的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原理图

第三节布局及界面设计画图板主要是为用户提供基本画图工具。所以以提供用户最需要的功能为目的。设计的性能如下：①让用户不管怎样操作都能得到用户的目的。争取做到傻瓜都能用我的软件。②实现了Windows画图板大部分功能，如：铅笔、橡皮、直线、园、字体等功能。还能让用户选择颜色等功能。③仿照Windows画图板，页面分为三栏，上方为颜色选择器，粗细选择器；左栏为工具选择区；右栏为画布。图3.3Window画图板布局采用DIV+CSS，工具按钮使用CSS3技术，进行圆角，高光，凹陷特效处理，画布为Canvas元素，大小为600*450。第四节JavaScript设计通过JavaScript的onclick事件实现鼠标点击后的效果。通过JavaScript的onmousemove鼠标拖动的效果。工具点击事件：改变画图模式，按钮样式，颜色设定，笔触设定等。画布鼠标点击事件：若是铅笔则在当前位置画图，若为需要拖动的模式则设定初始点击位置，待后续处理。画布鼠标拖动事件：若是铅笔则在当前位置画图，若为拖动的则在前背景画出轨迹。画布鼠标抬起事件：若为拖动则画出当前图形。

第四章功能的实现第一节简单功能的实现一、实例-线条通过指定从何处开始，在何处结束，来绘制一条线：图4.1线条JavaScript代码：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");//方法返回一个用于在画布上绘图的环境。cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>二、实例-圆形通过规定尺寸、颜色和位置，来绘制一个圆：图4.2圆JavaScript代码：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);//(坐标，半径，弧度)cxt.closePath();cxt.fill();</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>三、实例-渐变使用您指定的颜色来绘制渐变背景：图4.3渐变JavaScript代码：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");vargrd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>四、实例-图像把一幅图像放置到画布上：图4.4图像引入JavaScript代码：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");varimg=newImage()img.src="flower.png"cxt.drawImage(img,0,0);</script>Canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">YourbrowserdoesnotsupporttheCanvaselement.</canvas>

第二节前台显示实现图4.5前台效果图页面采用DIV+CSS进行3栏的布局<!--#实现功能颜色选择器#--><canvasid="canvas_color"width="198"height="15"style="border:1pxsolid#999;margin-top:10px;margin-left:10px;float:left;"></canvas><canvasid="canvas"width="600"height="450"style="border:1pxsolid#999;position:absolute;top:45px;left:60px;"></canvas><!--#前画布，实现鼠标轨迹跟踪#--><canvasid="canvas2"width="600"height="450"style="border:1pxsolid#999;position:absolute;top:45px;left:60px;"></canvas><!--#后画板，即主要显示画布#-->其中颜色板也是一个Canvas，这里填充了一个全色系的BMP图像，鼠标拖动时动态取色值即可。通过设定阴影和高光部分颜色，从而实现了凸起和凹陷的效果，分别对应普通和选中时的样式。画布为两个重叠的Canvas，分为前景和后景，前景画布重要用来显示拖放画笔的轨迹。第三节JavaScript画图实现一、页面加载初始化初始化各个变量，用以后面调用document.ondragstart=function(){returnfalse;} //ie禁止拖拽 document.onselectstart=function(){returnfalse;}//ie禁止选定canvas_size={x:$("#canvas").width(),y:$("#canvas").height()};//画板大小canvas_offset={x:$("#canvas")[0].offsetLeft,y:$("#canvas")[0].offsetTop};//偏移量origin={x:0,y:0}//起点end={x:0,y:0}//终点type=0;//默认为铅笔drawable=false;//画开关color_changeable=false;//改变颜色开关canvas=document.getElementById("canvas");//后画布canvas2=document.getElementById("canvas2");//前画布context=canvas.getContext('2d');//公开在Canvas上绘图需要的API。惟一（当前）可用的contextID是2d。context.strokeStyle="#00aeef";//直线fill_canvas("#ffffff");//填充默认色白色context.lineWidth=1;//画笔粗细context2=canvas2.getContext('2d');context2.strokeStyle="#00aeef";context2.lineWidth=1; 二、绑定事件1、绑定前景画布事件 $(canvas2).bind('mousedown',function(event){//鼠标在画布的图像上取得像素的坐标 drawable=true; origin.x=event.clientX-canvas_offset.x; origin.y=event.clientY-canvas_offset.y; if(type==7){//取色器varcanvasX=Math.floor(event.pageX-canvas_offset.x);varcanvasY=Math.floor(event.pageY-canvas_offset.y);//获得canvas整数坐标（下舍） varimageData=context.getImageData(canvasX,canvasY,1,1);//这个方法有4个参数：要访问的像素区域原点坐标（x，y）、像素区域的宽度和高度varpixel=imageData.data; $("#color_span").css("background-color","rgb("+pixel[0]+","+pixel[1]+","+pixel[2]+")");//将获取到的像素信息传给变量 change_attr(-1,-1,"rgb("+pixel[0]+","+pixel[1]+","+pixel[2]+")"); } }); $(canvas2).bind('mouseup',function(event){ canvas_backup=context.getImageData(0,0,canvas.width,canvas.height); });2、绑定后景画布事件$(document).bind('mouseup',function(event){ if((type==1||type==3||type==4)&&drawable==true){//直线、圆、矩形 context2.clearRect(0,0,canvas_size.x,canvas_size.y);//清屏 end.x=event.clientX-canvas_offset.x; end.y=event.clientY-canvas_offset.y; draw(context); } drawable=false; color_changeable=false; });$(document).bind("mousemove",function(event){if(drawable==false)return;if(type==0){ end.x=event.clientX-canvas_offset.x; end.y=event.clientY-canvas_offset.y; draw(context); origin.x=end.x;origin.y=end.y;}elseif(type==1||type==3||type==4||type==5){ end.x=event.clientX-canvas_offset.x; end.y=event.clientY-canvas_offset.y; if(type==5){//橡皮擦 fill_canvas('#ffffff',end.x-10,end.y-10,20,20);return; }else{ context2.clearRect(0,0,canvas_size.x,canvas_size.y); draw(context2);}elseif(type==2){//放射线 end.x=event.clientX-canvas_offset.x; end.y=event.clientY-canvas_offset.y; draw(context);}elseif(type==6){//图章 if(!window.dateTime) window.dateTime=newDate(); if((newDate()-window.dateTime)>20){//设计延迟 window.dateTime=newDate(); context.drawImage(heart,event.clientX-canvas_offset.x-heart.width/2,event.clientY-canvas_offset.y-heart.height/2); } }});3、绘图主函数functiondraw(context){ if(type==0||type==1||type==2){//铅笔，直线，放射线 context.beginPath();//开始路径 context.moveTo(origin.x,origin.y);//将绘图位置移动到坐标x,y。 context.lineTo(end.x,end.y);//从绘图方法结束的最后位置到x,y绘制一条直线。 context.stroke();//让线条显示出来}elseif(type==3){//圆 vark=((end.x-origin.x)/0.75)/2, w=(end.x-origin.x)/2, h=(end.y-origin.y)/2, x=(end.x+origin.x)/2, y=(end.y+origin.y)/2; context.beginPath(); context.moveTo(x,y-h); context.bezierCurveTo(x+k,y-h,x+k,y+h,x,y+h);//bezierCurveTo画布中开始子路径的一个新的集合。开始点、结束点相关联坐标;曲线结束点坐标 context.bezierCurveTo(x-k,y+h,x-k,y-h,x,y-h); context.closePath(); context.stroke();}elseif(type==4){//矩形 context.beginPath(); context.rect(origin.x,origin.y,end.x-origin.x,end.y-origin.y);//矩形（后大小） context.stroke();}elseif(type==6){//图章 context.drawImage(heart,origin.x,origin.y); }elseif(type==8){//文本 context.font=$("#pbig").val()+"pxVerdana";//文字样式 context.fillStyle=context.strokeStyle//文字颜色 context.fillText($("#ptext").val(),origin.x,origin.y);//创建文字，控制文件的起始位置 } }4、颜色选择器代码varimg=newImage(); img.src="img/color.bmp"; $(img).bind("load",function(){ canvas_color=document.getElementById("canvas_color"); context3=canvas_color.getContext('2d'); context3.drawImage(this,0,0,this.width,this.height);//绘制color.bmp canvas_color_data=context3.getImageData(0,0,canvas_color.width,canvas_color.height);//getImageData()复制画布上指定矩形的像素数据 $(canvas_color).bind("mousedown",function(event){ varidx=((event.clientX-canvas_color.offsetLeft-1)+(event.clientY-canvas_color.offsetTop-1)*canvas_color_data.width)*4;//idx根据鼠标位置算出的数值varr=canvas_color_data.data[idx+0];//rgb颜色的算法varg=canvas_color_data.data[idx+1];varb=canvas_color_data.data[idx+2];$("#color_span").css("background-color","rgb("+r+","+g+","+b+")");change_attr(-1,-1,"rgb("+r+","+g+","+b+")");color_changeable=true; }); $(canvas_color).bind("mousemove",function(event){ if(color_changeable==false) return; varx=event.clientX-canvas_color.offsetLeft-1; if(x>=canvas_color_data.width||x<0) return; vary=event.clientY-canvas_color.offsetTop-1; if(y>=canvas_color_data.height||y<0) return; varidx=(x+y*canvas_color_data.width)*4;varr=canvas_color_data.data[idx+0];varg=canvas_color_data.data[idx+1];varb=canvas_color_data.data[idx+2];$("#color_span").css("background-color","rgb("+r+","+g+","+b+")");change_attr(-1,-1,"rgb("+r+","+g+","+b+")"); }); })5、设置画笔粗细 $("#size_bar").bind("mousedown",function(event){ varthumb=$("#size_thumb");//调节画笔粗细的圆 varmain_w=$(this).width(); varmainLeft=$(this).offset().left; $("#size_span").html(Math.ceil($(thumb).position().left/main_w*5)+1);//显示数字，上舍

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论