基于HTMLCanvas的画图板设计和实现.doc
《基于HTMLCanvas的画图板设计和实现.doc》由会员分享,可在线阅读,更多相关《基于HTMLCanvas的画图板设计和实现.doc(61页珍藏版)》请在咨信网上搜索。
1、 摘 要 Web2.0带来丰富互联网技术让全部些人全部享受到了技术发展和体验进步乐趣。而作为下一代互联网标准,HTML5自然也是备受期待和瞩目。HTML5是近十年来Web开发标准巨大飞跃。和以前版本不一样,HTML5并非仅仅用来表示Web内容,它新使命是将Web带入一个成熟应用平台,在HTML5平台上,视频、音频、图象、动画,和同电脑交互全部被标准化。现阶段对于HTML5技术研发和开发工作关键集中在技术草案确实立和新互联网应用开发上,而伴随互联网发展,HTML标准也在不停改变,HTML标准已经走过第4代了,因为它能够用简单标签元素,替换属性能实现之前需要用很多复杂JavaScript代码才能有
2、实现功效,HTML5越来越受到欢迎。 HTML5带来很多令人激动新特征,这在之前HTML中是不可见到。其中一个最值得提及特征就是用于绘画 HTML Canvas,能够对2D或位图进行动态、脚本渲染。本文具体分析了HTML5技术介绍和发展前景,并深入探讨了HTML5引入关键标签Canvas元素,介绍了Canvas能够实现关键功效,在此基础上实现了部分类似Windows画图板功效,包含铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功效,在实现过程中也利用了最新CSS3技术,最终再次总结了这次毕设经验和对未来展望。 本文针对其引入Canvas绘图元素进行了深入研究,此元素能够替
3、换画图作为动画渲染工具,效率和安全性更高,开发更便捷,必将是以后动画,游戏等应用首选开发方法,前景很好。【关键词】Web2.0 HTML5 CSS3 CanvasABSTRACTWeb2.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 attenti
4、on. 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
5、 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 s
6、imple 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 character
7、istics 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 drawi
8、ng 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 introd
9、uces 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 ve
10、ry good.【Key words】WEB2.0 HTML5 CSS3 Canvas目 录前 言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第四节 JavaSc
11、ript设计20第四章 功效实现21第一节 简单功效实现21第二节 前台显示实现24第三节 JavaScript画图实现25第四节 最终效果32第五节 不足之处38第五章 结束语39致 谢40参考文件41附 录42前 言伴随互联网时代高速发展,上网早已经成为人民日常生活中一个必不可少部分,大家能够在网络上获取信息,甚至于在网络上完成日常正常生活。看新闻,看电视,订餐等等。HTML上个版本早在1999年制订,伴随二十一世纪网络不停发展,已经不能适应该前需求,于是HTML5营运而生了。HTML5是HTML下一个关键修订版本,以期能在互联网应用快速发展时候,使网络标准达成符合现代网络需求,现仍处于发
12、展阶段。它期望能够降低浏览器对丰富性网络应用服务插件需要,而且提供更多能有效增强网络应用标准集。HTML5出现再次告诉我们,我们生活,日常办公,越来越有可能全在网页端实现了。现在大家喜爱在电脑上绘图,画图版作为一个日常生活工具,现在也能在我们网页端实现了。HTML5一个很有用实用特征是用于绘画Canvas元素,Canvas拥有很多绘制功效如画笔、矩形、圆形、字符和图像处理方法,她为大家在网页绘图及图像处理带来了方便。第一章 相关HTML5和画图板第一节 HTML5介绍HTML标准自1999年12月公布HTML4.01后,后继HTML5和其它标准被束之高阁,为了推进Web标准化运动发展,部分企业
13、联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组,WHATWG) 组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于 XHTML 2.0。在 年,双方决定进行合作,来创建一个新版本 HTML。HTML5 草案前身名为 Web Applications 1.0,于被WHATWG提出,于被W3C接纳,并成立了新 HTML 工作团体。HTML5 第一份正式草案已于1月22日公布。HTML5 仍处于完善之中。然而
14、,大部分现代浏览器已经含有了一些 HTML5 支持。12月17日,万维网联盟(W3C)正式宣告凝结了大量网络工作者心血HTML5规范已经正式定稿。依据W3C讲话稿称:“HTML5是开放Web网络平台奠基石。”支持HTML5浏览器包含Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;中国傲游浏览器(Maxthon),和基于IE所推出360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器一样含有支持HTML5能力。HTML5提供了部分新元素和属性,比如(网站导航块)和。这种标签将有利于搜索引擎索引整理,同时愈加好帮助小屏幕装置和视障人士
15、使用,除此之外,还为其它浏览要素提供了新功效,如和标识。第二节 HTML5特征一、取消了部分过时HTML4标识其中包含纯粹显示效果标识,如和,它们已经被CSS替换。新HTML5 吸收了XHTML2 部分提议,包含部分用来改善文档结构功效,比如,新HTML 标签 header, footer, dialog, aside, figure 等使用,将使内容创作者愈加语义地创建文档,之前开发者在实现这些功效时通常全部是使用DIV。二、将内容和展示分离b 和 i 标签仍然保留,但它们意义已经和之前有所不一样,这些标签意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,ce
16、nter,strike 这些标签则被完全去掉了。三、部分全新表单输入对象包含日期,URL,Email 地址,其它对象则增加了对非拉丁字符支持。HTML5 还引入了微数据,这一使用机器能够识别标签标注内容方法,使语义Web 处理更为简单。总来说,这些和结构相关改善使内容创建者能够创建更洁净,更轻易管理网页,这么网页对搜索引擎,对读屏软件等更为友好。四、全新,更合理Tag多媒体对象将不再全部绑定在object或 embed Tag 中,而是视频有视频Tag,音频有音频Tag。五、当地数据库这个功效将内嵌一个当地SQL 数据库,以加速交互式搜索,缓存和索引功效。同时,那些离线Web 程序也将所以获益
17、匪浅。不需要插件富动画。六、Canvas 对象将给浏览器带来直接在上面绘制矢量图能力,这意味着用户能够脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。七、浏览器中真正程序将提供 API 实现浏览器内编辑,拖放,和多种图形用户界面能力。内容修饰Tag 将被剔除,而使用CSS。 第三节 HTML5中国外发展现实状况中国市场支持HTML5标准浏览器已经从不到2%发展到超出三成百分比,这一百分比将有望突破突破70%。越来越多PC浏览器开始重视而且支持HTML5发展同时,HTML5也越来越受到移动互联网重视。相对于 PC 平台而言,移动平台一直是开发者更为关心,因为移动平台浏览器
18、品种较少,版本也普遍集中在最新正式版。同时,因为移动设备更新换代速度要比 PC 愈加快,硬件支持和浏览器情况全部要比 PC平台情况愈加好。移动平台上主流 5 款浏览器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0),现在对标准支持度均高于 60%。其中表现居首是 Chrome for Android,而支持度相对较低 Android 系统自带浏览器 Android Browser 对 HTML5 支持度也在 60%以上。另外,硬件加速促进
19、了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
20、+上 Chrome在硬件加速方面更是超越了原生浏览器表现。 年 12 月 17日,W3C 公布了 HTML5 和 Canvas 2D 两个标准完全定义版本,标志着 HTML5 标准已经在趋向稳定。在,支持 HTML5 PC 浏览器将会有一个较大增加。 除Chrome、Firefox 之外,微软推出 IE9、IE10 对HTML5 支持度全部大幅提升,相信 HTML5 大面积使用只是时间问题。另外,移动平台HTML5比PC平台发展愈加快。因为移动设备更新换代速达远远超出PC,而且硬件性能也能够完全支持HTML5。很多大企业在HTML5 Canvas开发上下足了功夫, 或成为HTML5更普及十二个
21、月。 第四节 画图工具画图板简单灵巧,深得广大用户喜爱,其占用资源少、操作简单、功效等特点为用户小型图形开发工作带来了很多便利。当用户要处理部分要求不是很高工作时,能够利用画图工具来完成,比如实现部分简单操作如画直线,图片,图片图片等功效。用过微软Windows操作系统人一定全部对Windows自带画图板很熟悉。同图像处理软件界“大哥大”Photoshop比起来,它即使不及Photoshop功效强大、内容丰富,不过作为Windows一直以来全部内带附件程序,它含有小巧玲珑、简单实用等其它绘图软件所不含有优点。同时它风格也被很多其它绘图软件所效仿。Windows 画图程序一直伴伴随 Window
22、s 各个版本,这个很简单,几乎没有什么用处程序拥有最基础绘图功效,很适适用来涂鸦。HTML5 Canvas 对象使在线绘图成为可能,即使 HTML5 还远未成熟,但大家已经迫不及待地用它设计部分让人惊叹应用。第二章 相关技术介绍第一节 Canvas元素介绍Canvas元素最先由苹果企业Safari浏览器引入,以后Chrome和Firefox也全部支持了这一元素,现在该元素已被加入HTML5标准草案,而且得到了全部主流浏览器支持。HTML5 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您能够控制其每一像素。Canvas 拥有多个绘制路径、矩形、圆形、字符和
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 HTMLCanvas 画图板 设计 实现
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,个别因单元格分列造成显示页码不一将协商解决,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【二***】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【二***】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。