欢迎来到天天文库
浏览记录
ID:25234105
大小:99.00 KB
页数:15页
时间:2018-11-19
《项目总结报告》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、2011年第2学期计算机网络程序设计课程大作业项目总结报告作品名称:纯Javascript的交互式南京地铁图所在学院:信息科学技术学院组长及学号:马歌080801116组员及学号:汤忱鑫080801121吴雪荣080801125联系电话:15996305967电子邮箱:735081013@qq.com提交日期:2011/6/15填写说明1.所有项目必须为一个基本完整的设计。作品报告书旨在能够清晰准确地阐述(或图示)该项目(或方案)。2.作品报告采用A4纸撰写。除标题外,所有内容必需为宋体、小四号字、1.5倍行距。3.作品报告中各项目具体要求见说明文字部分,作品报告书撰写完毕
2、后,请删除所有说明文字。(本页不删除)4.作品报告模板里已经列的内容仅供参考,作者也可以多加内容。总字数在5000字左右为宜。目录选题背景1实现方案2相关说明3团队分工4总结与建议5参考文献6选题背景【一】使用HTML5canvas进行Web绘图[1]在HTML5得以广泛推广之前,开发人员通常使用SVG,VML等技术进行Web绘图操作,但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求。HTML5canvas元素的出现填补了这种不足,开发人员可以使用JavaScript脚本语言在canvas中进行一系列基于命令的图形绘制操作。在绘图过程中用到的贝
3、塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。滑动两个中间点,贝塞尔曲线的形状会发生变化。二十世纪六十年代晚期,PierreBézier应用数学方法为雷诺公司的汽车制造业描绘出了贝塞尔曲线。1962年,法国数学家PierreBézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名为贝塞尔曲线。[2]HTML5中新引入的canvas元素使得Web开发人员在无须借助任何第三方插件(如Flash,Silverlight)的情况下,可以直接使用Ja
4、vaScript脚本在Web页面进行绘图。它首次由苹果公司的Webkit框架引入实现,并成功运用在Safari浏览器中。目前,canvas已成为HTML5规范中的事实性标准,并且已经被Firefox3.0+,Chrome3.0+,Opera10.0+等浏览器所支持。最近IE也正式宣称将在其9.0版本之后,开始对canvas元素进行支持。【二】JavaScriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中连
5、接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点: 1、是一种脚本编写语言:JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,第12页共7页它提供了一个易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。
6、2、动态性:JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。3、跨平台性:JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。无须有高性能的电脑,软件仅需一个字处理软件及一浏览器,无须WEB服务器通道,通过自己的电脑即可完成所有的事情。 第12页共7页实现方案【系统方案】:采用了html5的canvas元素结合javaScript在网页上绘制图像的功能,绘制了静态地铁图。经过分析,静态地铁图包括矩形,圆形,
7、还有曲线,还有文本等主要内容。用onMouseMove事件响应代码、cmp(,,)显示div块代码和display()显示div块代码来构造悬停框,以及利用JScriptscript文件和html5原程序代码将各种旅游简介图链接到整个地铁图中,最终实现滚动的广告牌。【实现原理】:[5]模块一:静态地铁图绘制[3] 1、设置一个矩形区域,这是一个画布,我们可以控制上面的每一像素。JavaScript使用id来寻找canvas元素:
此文档下载收益归作者所有