没有合适的资源?快使用搜索试试~ 我知道了~
首页基于HTML5_Canvas的画图板设计与实现
本文详细分析了HTML5技术的简介和发展前景,并深入探讨了HTML5引入的核心标签Canvas元素,介绍了Canvas可以实现的主要功能,在此基础上实现了部分类似Windows画图板的功能,包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能,在实现过程中也利用了最新的CSS3技术,最后再次总结了这次毕设的经验和对未来的展望。
资源详情
资源评论
资源推荐
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 Canvas
II
ABSTRACT
Web2.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 Canvas
III
目 录
前 言..............................................................................................................................................................................1
第一章 关于 HTML5 和画图板..................................................................................................................................2
第一节 HTML5 简介...........................................................................................................................................2
第二节 HTML5 特性...........................................................................................................................................2
第三节 HTML5 国内外发展现状......................................................................................................................3
第四节 画图工具................................................................................................................................................4
第二章 相关技术简介.................................................................................................................................................5
第一节 Canvas 元素简介.....................................................................................................................................5
第二节 第一个 Canvas 程序的实现....................................................................................................................5
第三节 JavaScript 及 jQuery 简介......................................................................................................................6
第四节 CSS3 简介..............................................................................................................................................9
第五节 开发工具 DreamWeaver 介绍.............................................................................................................11
第六节 调试工具 Firefox 及 Firebug 简介.......................................................................................................12
第三章 功能设计.......................................................................................................................................................15
第一节 需求设计...............................................................................................................................................15
第二节 基本原理...............................................................................................................................................16
画图板制作的基本原理是通过鼠标点击画板坐标完成的,下图是他的原理图.......................................16
图 3.2 原理图......................................................................................................................................................17
第三节 布局及界面设计...................................................................................................................................18
图 3.3 Window 画图板.......................................................................................................................................18
第四节 JavaScript 设计......................................................................................................................................18
第四章 功能的实现...................................................................................................................................................20
第一节 简单功能的实现...................................................................................................................................20
第二节 前台显示实现......................................................................................................................................23
第三节 JavaScript 画图实现..............................................................................................................................24
第四节 最终效果...............................................................................................................................................30
第五节 不足之处...............................................................................................................................................36
第五章 结束语..........................................................................................................................................................37
参考文献.....................................................................................................................................................................38
附 录............................................................................................................................................................................39
1
前 言
随着互联网时代的高速发展,上网早已经成为人民日常生活中一个必不可少的部分,人
们可以在网络上获取信息,甚至于在网络上完成日常的正常生活。看新闻,看电视,订餐等
等。
HTML 的上个版本早在 1999 年制定,随着 21 世纪网络的不断发展,已经不能适应当前
的需求,于是 HTML5 营运而生了。HTML5 是 HTML 下一个的主要修订版本,以期能在互
联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,现仍处于发展阶段。它希
望能够减少浏览器对丰富性网络应用服务的插件的需要,并且提供更多能有效增强网络应用
的标准集。
HTML5 的出现再次告诉我们,我们的生活,日常办公,越来越有可能全在网页端实现
了。如今很多人喜欢在电脑上绘图,画图版作为一个日常的生活工具,如今也能在我们网页
端实现了。HTML5 一个很有用实用的特性是用于绘画的 Canvas 元素,Canvas 拥有许多绘制
功能如画笔、矩形、圆形、字符以及图像处理的方法,他为人们在网页绘图及图像处理带来
了方便。
2
第一章 关于 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 年,双方决定进行合作,来创建一个新版本的 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。
二、将内容和展示分离
b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将
一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标
签则被完全去掉了。
三、一些全新的表单输入对象
剩余45页未读,继续阅读
mininja
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- ExcelVBA中的Range和Cells用法说明.pdf
- 基于单片机的电梯控制模型设计.doc
- 主成分分析和因子分析.pptx
- 共享笔记服务系统论文.doc
- 基于数据治理体系的数据中台实践分享.pptx
- 变压器的铭牌和额定值.pptx
- 计算机网络课程设计报告--用winsock设计Ping应用程序.doc
- 高电压技术课件:第03章 液体和固体介质的电气特性.pdf
- Oracle商务智能精华介绍.pptx
- 基于单片机的输液滴速控制系统设计文档.doc
- dw考试题 5套.pdf
- 学生档案管理系统详细设计说明书.doc
- 操作系统PPT课件.pptx
- 智慧路边停车管理系统方案.pptx
- 【企业内控系列】企业内部控制之人力资源管理控制(17页).doc
- 温度传感器分类与特点.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0