淘豆网网友12344近日为您收集整理了关于基于HTML5_Canvas的画图板设计与实现【精品】的文档，希望对您的工作和学习有所帮助。以下是文档介绍：基于HTML5_Canvas的画图板设计与实现【精品】 I摘要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 CanvasIIABSTRACTWeb2.0 brings a wealth of technology for all to enjoy the fun of technologydevelopment and experience progress. As a next-generation standard, HTML5 is naturallyhighly an(来源：淘豆网[])ticipated and attention. HTML5 is a huge leap over the past decade Web developmentstandards. Unlike the previous version,HTML5 is not just used to represent Web content, its newmission is the Web into a full-fledged application platform, HTML5 platform, video, audio, image,animation, and interaction with puter be standardized. At this stage for the HTML5technology and development work focused on the establishment of the draft technology and applic(来源：淘豆网[])ation development, HTML standards are changing with the development of , HTML standard has gone through four generations, because it simple label elements,instead of before the property can be realized with a lot plex JavaScript code in order toachieve the functions, HTML5 has been more popular.HTML5 brings a lot of exciting new features. This is not seen in the previous HTML. One ofthe most worth mentioning the characteristics is HTML Canvas for p(来源：淘豆网[])ainting, 2D or bitmaprendering of dynamic script. I detailed analysis the HTML5 technology introduction anddevelopment prospects, a deeper look into the core of the introduction of HTML5 tag Canvaselement, the Canvas can be achieved, based on the a similar Windows drawing board, includingpencil, stamp imitation, draw a straight line, circle, rectangle, eraser, background image, take aswatch in the realization of the process also takes advantage of (来源：淘豆网[])the latest CSS3 techniques and,finally, plete set up experience and vision for the future.This paper introduces the Canvas drawing elements which conducted research, this elementcan replace the drawing as a tool for animation rendering, higher efficiency and security, thedevelopment of more convenient, be the future animation, games and other application developmentmethod of choice , the outlook is very good.【Key words】WEB2.0 HTML5 CSS3 CanvasIII目录(来源：淘豆网[])前言..........................................................................................................................................................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致谢....................................................................................................................................................... 40参考文献...................................................................................................................................................41附录....................................................................................................................................................... 42- 1 -前言随着互联网时代的高速发展,上网早已经成为人民日常生活中一个必不可少的部分,人们可以在网络上获取信息,甚至于在网络上完成日常的正常生活。看新闻,看电视,订餐等等。HTML 的上个版本早在 1999 年制定,随着 21 世纪网络的不断发展,已经不能适应当前的需求,于是 HTML5 营运而生了。HTML5 是 HTML 下一个的主要修订版本,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,现仍处于发展阶段。它希望能够减少浏览器对丰富性网络应用服务的插件的需要,并且提供更多能有效增强网络应用的标准集。HTML5 的出现再次告诉我们,我们的生活,日常办公,越来越有可能全在网页端实现了。如今很多人喜欢在电脑上绘图,画图版作为一个日常的生活工具,如今也能在我们网页端实现了。HTML5 一个很有用实用的特性是用于绘画的 Canvas 元素,Canvas 拥有许多绘制功能如画笔、矩形、圆形、字符以及图像处理的方法,他为人们在网页绘图及图像处理带来了方便。- 2 -第一章关于 HTML5 和画图板第一节 HTML5 简介HTML 标准自 1999 年 12 月发布的 HTML4.01 后,后继的 HTML5 和其它标准被束之高阁,为了推动 Web 标准化运动的发展,一些公司联合起来,成立了一个叫做 Web HypertextApplication 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 提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。第二节 HTML5 特性一、取消了一些过时的 HTML4 标记其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 CSS 取代。新的 HTML5 吸取了 XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的 HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用 DIV。二、将内容和展示分离- 3 -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 平台而言,移动平台一直是开发者更为关心的,因为移动平台浏览器品种较- 4 -少,版本也普遍集中在最新正式版。同时,由于移动设备的更新换代速度要比 PC 更快,硬件支持和浏览器的状况都要比 PC 平台的状况更好。移动平台上主流的 5 款浏览器(iOSSafari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android15.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 比起来,它虽然不及 Photoshop 的功能强大、内容丰富,但是作为 Windows 一直以来都内带的附件程序,它具有小巧玲珑、简单实用等其它绘图软件所不具备的优点。同时它的风格也被许多其它绘图软件所效仿。Windows 画图程序一直伴随着 Windows 各个版本,这个很简单,几乎没有什么用处的程序拥有最基本的绘图功能,很适合用来涂鸦。HTML5 的 Canvas 对象使在线绘图成为可能,虽然 HTML5 还远未成熟,但很多人已经迫不及待地用它设计一些让人惊叹的应用。- 5 -第二章相关技术简介第一节 Canvas 元素简介Canvas 元素最先由苹果公司的 Safari 浏览器引入,后来 Chrome 和 Firefox 也都支持了这一元素,目前该元素已被加入 HTML5 标准的草案,并且得到了所有主流浏览器的支持。HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。向 HTML5 页面添加 Canvas 元素并规定元素的 ID、宽度和高度:<canvas id="mycanvas" width="200" height="100"></canvas>这样就可创建 Canvas 元素。第二节第一个 Canvas 程序的实现<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title></head><body><div style="margin-left:30px;"><canvas id="mycanvasTag" width="400" height="400"style="background-color:blue;border:10px yellow solid"></canvas><br /><a href="index.html">back</a></div></body></html>这个 Canvas 的宽度和高度均为 400 像素,边框为黄色,背景为蓝色。Canvas 上没有任何实际绘图。绘图通过属于 Canvas 的 JavaScript 方法完成。- 6 -下面我们介绍下 Canvas 的方法:表 2.1 Canvas 方法介绍方法用途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)向一个渐变添加一个颜色停止。颜色停止(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。o(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:<script type="text/javascript">var c=document.getElementById("mycanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect (0, 0, 150, 75);</script>JavaScript 使用 ID 来寻找 Canvas 元素:var c=document.getElementById("mycanvas");然后,创建 context 对象:var cxt=c.getContext("2d");getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,目前还没有 3d 的对象。下面的两行代码绘制一个红色的矩形:- 7 -cxt.fillStyle="#FF0000";cxt.fillRect (0, 0, 150, 75);fillStyle 方法将方块染成了红色,fillRect 则方法规定了形状、位置和尺寸。相类似的就可以通过浏览器提供的基础方法,构建出激动人心的应用。第三节 JavaScript 及 jQuery 简介JavaScript scape 的 LiveScript 发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有 28.8kbps,验证步骤浪费的时间太多。scape 的浏览器 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;③通过插件来扩展;④方便的工具- 例如浏览器版本判断;⑤渐进增强;⑥链式调用;⑦多浏览器支持 Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+;

播放器加载中，请稍候...
系统无法检测到您的Adobe Flash Player版本
建议您在线安装最新版本的Flash Player 在线安装