推荐基于HTML5Canvas的画图板设计与实现精品Word格式文档下载.docx
《推荐基于HTML5Canvas的画图板设计与实现精品Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《推荐基于HTML5Canvas的画图板设计与实现精品Word格式文档下载.docx（44页珍藏版）》请在冰豆网上搜索。
如今很多人喜欢在电脑上绘图，画图版作为一个日常的生活工具，如今也能在我们网页端实现了。
5一个很有用实用的特性是用于绘画的Canvas元素，Canvas拥有许多绘制功能如画笔、矩形、圆形、字符以及图像处理的方法，他为人们在网页绘图及图像处理带来了方便。
第一章关于5和画图板
第一节5简介
标准自1999年12月发布的4.01后，后继的5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组，WHATWG）的组织。
WHATWG致力于Web表单和应用程序，而W3C（WorldWideWebConsortium，万维网联盟）专注于X2.0。
在20XX年，双方决定进行合作，来创建一个新版本的。
5草案的前身名为WebApplications1.0，于20XX年被WHATWG提出，于20XX年被W3C接纳，并成立了新的工作团队。
5的第一份正式草案已于20XX年1月22日公布。
5仍处于完善之中。
然而，大部分现代浏览器已经具备了某些5支持。
20XX年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的5规范已经正式定稿。
根据W3C的发言稿称：
“5是开放的Web网络平台的奠基石。
”
支持5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；
国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持5的能力。
5提供了一些新的元素和属性，例如<
nav>
（网站导航块）和<
footer>
。
这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<
audio>
和<
video>
标记。
第二节5特性
一、取消了一些过时的4标记
其中包括纯粹显示效果的标记，如<
font>
center>
，它们已经被CSS取代。
新的5吸取了X2一些建议，包括一些用来改善文档结构的功能，比如，新的标签header,footer,dialog,aside,figure等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用DIV。
二、将内容和展示分离
b和i标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。
u，font，center，strike这些标签则被完全去掉了。
三、一些全新的表单输入对象
包括日期，URL，Email地址，其它的对象则增加了对非拉丁字符的支持。
5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。
总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。
四、全新的，更合理的Tag
多媒体对象将不再全部绑定在object或embedTag中，而是视频有视频的Tag，音频有音频的Tag。
五、本地数据库
这个功能将内嵌一个本地的SQL数据库，以加速交互式搜索，缓存以及索引功能。
同时，那些离线Web程序也将因此获益匪浅。
不需要插件的富动画。
六、Canvas对象
将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。
七、浏览器中的真正程序
将提供API实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。
内容修饰Tag将被剔除，而使用CSS。
第三节5国内外发展现状
国内市场支持5标准的浏览器已经从20XX年的不到2%发展到20XX年超过三成的比例，20XX年这一比例将有望突破突破70%。
越来越多PC浏览器开始重视并且支持5发展的同时，5也越来越受到移动互联网的重视。
相对于PC平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。
同时，由于移动设备的更新换代速度要比PC更快，硬件支持和浏览器的状况都要比PC平台的状况更好。
移动平台上主流的5款浏览器（iOSSafari6.0、AndroidBrowser4.1、OperaMobile12.1、ChromeforAndroid18.0、FirefoxforAndroid15.0），目前对标准的支持度均高于60%。
其中表现居首的是ChromeforAndroid，而支持度相对较低的Android系统自带的浏览器AndroidBrowser对5的支持度也在60%以上。
此外，硬件加速促进了5标准的发展和应用。
在使用5开发时，开发者经常会谈到的一个问题就是性能。
使用5动画、Canvas、WebGL究竟能否带来更好的用户体验，与其实际性能密不可分。
目前国内外主流浏览器均支持硬件加速，这对5的发展无疑是个好消息。
可以支持硬件加速的浏览器版本有：
Chrome18+、Firefox4+、IE9+、Safari5.1+、Opera12+。
国内的有360安全浏览器、搜狗浏览器以及QQ浏览器。
手机系统情况也比较乐观，主流的智能手机系统iOS、Android以及WindowsPhone上的原生浏览器都已经支持硬件加速。
Android4.0+上的Chrome在硬件加速方面更是超越了原生浏览器的表现。
20XX年12月17日，W3C发布了5以及Canvas2D两个标准的完全定义版本，标志着5的标准已经在趋向稳定。
在20XX年，支持5的PC浏览器将会有一个较大的增长。
除Chrome、Firefox之外，微软推出的IE9、IE10对5的支持度都大幅提升，相信5大面积使用只是时间问题。
此外，移动平台的5比PC平台发展的更快。
由于移动设备的更新换代速达远远超过PC，而且硬件性能也能够完全支持5。
许多大公司在5Canvas开发上下足了功夫，20XX年或成为5更普及的一年。
第四节画图工具
画图板简单灵巧，深得广大用户的喜爱，其占用资源少、操作简单、功能等特点为用户的小型图形开发工作带来了很多便利。
当用户要处理一些要求不是很高的工作时，可以利用画图的工具来完成，比如实现一些简单的操作如画直线，图片，图片图片等功能。
用过微软Windows操作系统的人一定都对Windows自带的画图板非常的熟悉。
同图像处理软件界的“大哥大”Photoshop比起来，它虽然不及Photoshop的功能强大、内容丰富，但是作为Windows一直以来都内带的附件程序，它具有小巧玲珑、简单实用等其它绘图软件所不具备的优点。
同时它的风格也被许多其它绘图软件所效仿。
Windows画图程序一直伴随着Windows各个版本，这个很简单，几乎没有什么用处的程序拥有最基本的绘图功能，很适合用来涂鸦。
5的Canvas对象使在线绘图成为可能，虽然5还远未成熟，但很多人已经迫不及待地用它设计一些让人惊叹的应用。
第二章相关技术简介
第一节Canvas元素简介
Canvas元素最先由苹果公司的Safari浏览器引入，后来Chrome和Firefox也都支持了这一元素，目前该元素已被加入5标准的草案，并且得到了所有主流浏览器的支持。
5的Canvas元素使用JavaScript在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
向5页面添加Canvas元素并规定元素的ID、宽度和高度：
<
canvasid="
mycanvas"
width="
200"
height="
100"
>
/canvas>
这样就可创建Canvas元素。
第二节第一个Canvas程序的实现
!
DOCTYPE>
head>
title>
5CanvasDemo<
/title>
/head>
body>
divstyle="
margin-left:
30px;
"
mycanvasTag"
400"
style="
background-color:
blue;
border:
10pxyellowsolid"
br/>
ahref="
index."
back<
/a>
/div>
/body>
/>
这个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='
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（"
）;
varcxt=c.getContext（"
2d"
cxt.fillStyle="
#FF0000"
;
cxt.fillRect（0,0,150,75）;
/script>
JavaScript使用ID来寻找Canvas元素：
然后，创建context对象：
getContext（"
）对象是内建的5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，目前还没有3d的对象。
下面的两行代码绘制一个红色的矩形：
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使用户能更方便地处理documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的页面保持代码和内容分离，也就是说，不用再在里面插入一堆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服务，比较常用的引用地址如下：
src="
ajax.googleapis./ajax/libs/jquery/1.8/jquery.min.js"
目前的版本是1.9.0（截止20XX年1月）。
最常使用的jQuery基础方法是.ready（）方法：
$（document）.ready（function（）{
//scriptgoeshere
}）;
或者其简写：
$（function（）{
当DOM加载完就可以执行（比window.onload更早），在同一个页面里可以多次出现.ready（）。
实例：
为元素添加单击事件，发生对象隐藏效果。
<
jquery.js"
$（document）.ready（function（）{
$（"
p"
）.click（function（）{
$（this）.hide（）;
}）;
p>
Ifyouclickonme,Iwilldisappear.<
/p>
结果：
隐藏页面内的<
标签。
选择器：
jQuery使用sizzle引擎，支持CSS选取，Xpath选取等方式。
以下列举了几个特征：
$（"
）选
升级会员 