基于HTML5Canvas的画图板设计与实现.doc

摘 要 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 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 and, finally, this complete set up experience and vision for the future.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 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前 言随着互联网时代的高速发展，上网早已经成为人民日常生活中一个必不可少的部分，人们可以在网络上获取信息，甚至于在网络上完成日常的正常生活。

看新闻，看电视，订餐等等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 年，双方决定进行合作，来创建一个新版本的 HTMLHTML5 草案的前身名为 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浏览器、搜狗浏览器、浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力HTML5提供了一些新的元素和属性，例如