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

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

《基于HTML5Canvas的画图板设计与实现.docx》由会员分享，可在线阅读，更多相关《基于HTML5Canvas的画图板设计与实现.docx（56页珍藏版）》请在冰豆网上搜索。

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

摘要

Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。

而作为下一代互联网标准，HTML5自然也是备受期待和瞩目。

HTML5是近十年来Web开发标准巨大的飞跃。

和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。

现阶段对于HTML5技术的研发和开发工作主要集中在技术草案的确立与新互联网应用的开发上，而随着互联网的发展，HTML标准也在不断变化，HTML标准已经走过第4代了，因为它能够用简单的标签元素，代替属性能实现之前需要用很多复杂JavaScript代码才能有实现的功能，HTML5越来越受到欢迎。

HTML5带来很多令人激动的新特性，这在之前的HTML中是不可见到的。

其中一个最值得提及的特性就是用于绘画的HTMLCanvas，可以对2D或位图进行动态、脚本的渲染。

本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在实现过程中也利用了最新的CSS3技术，最后再次总结了这次毕设的经验和对未来的展望。

本文针对其引入的Canvas绘图元素进行了深入的研究，此元素可以替代画图作为动画渲染的工具，效率与安全性更高，开发更便捷，必将是以后的动画，游戏等应用首选的开发方式，前景非常好。

【关键词】Web2.0HTML5CSS3Canvas

ABSTRACT

Web2.0bringsawealthofInternettechnologyforalltoenjoythefunoftechnologydevelopmentandexperienceprogress.Asanext-generationInternetstandard,HTML5isnaturallyhighlyanticipatedandattention.HTML5isahugeleapoverthepastdecadeWebdevelopmentstandards.Unlikethepreviousversion,HTML5isnotjustusedtorepresentWebcontent,itsnewmissionistheWebintoafull-fledgedapplicationplatform,HTML5platform,video,audio,image,animation,andinteractionwiththecomputerbestandardized.AtthisstagefortheHTML5technologyanddevelopmentworkfocusedontheestablishmentofthedrafttechnologyandnewInternetapplicationdevelopment,HTMLstandardsarechangingwiththedevelopmentoftheInternet,HTMLstandardhasgonethroughfourgenerations,becauseitsimplelabelelements,insteadofbeforethepropertycanberealizedwithalotofcomplexJavaScriptcodeinordertoachievethefunctions,HTML5hasbeenmorepopular.

HTML5bringsalotofexcitingnewfeatures.ThisisnotseeninthepreviousHTML.OneofthemostworthmentioningthecharacteristicsisHTMLCanvasforpainting,2Dorbitmaprenderingofdynamicscript.IdetailedanalysistheHTML5technologyintroductionanddevelopmentprospects,adeeperlookintothecoreoftheintroductionofHTML5tagCanvaselement,theCanvascanbeachieved,basedontheasimilarWindowsdrawingboard,includingpencil,stampimitation,drawastraightline,circle,rectangle,eraser,backgroundimage,takeaswatchintherealizationoftheprocessalsotakesadvantageofthelatestCSS3techniquesand,finally,thiscompletesetupexperienceandvisionforthefuture.

ThispaperintroducestheCanvasdrawingelementswhichconductedresearch,thiselementcanreplacethedrawingasatoolforanimationrendering,higherefficiencyandsecurity,thedevelopmentofmoreconvenient,bethefutureanimation,gamesandotherapplicationdevelopmentmethodofchoice,theoutlookisverygood.

【Keywords】WEB2.0HTML5CSS3Canvas

前言

随着互联网时代的高速发展，上网早已经成为人民日常生活中一个必不可少的部分，人们可以在网络上获取信息，甚至于在网络上完成日常的正常生活。

看新闻，看电视，订餐等等。

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提供了一些新的元素和属性，例如