摘 要

HTML5 作为一个新兴的技术标准，它正在以越来越快的速度去取代之前的HTML4的标准。HTML5并没有在HTML4上面进行颠覆性的革新，它在HTML4的基础上保持新特性的平稳过渡。 HTML5里面有着的丰富的属性和元素，也都能完美支持现在正在运行使用的 HTML 4.01 的规范标准。引入了几个新的元素和属性是它是比较重要的内容，它们适用许多使用 web 页面的领域如数据存储、音频、视频、图形、内容呈现等。HTML5在图形方面的加强主要是通过引入Canvas元素来实现。在网页上面使用Canvas元素的时候，Canvas会先创建一块矩形的画布，绘制图形的操作可以在里面进行，通过Javascript技术对其中的图片进行自由的操作。

本文基于HTML5里的Canvas技术，结合Javascript、Css等技术设计一个在线图片编辑器，能够在网页上实现图片的上下左右的移动，顺时针逆时针的进行转动旋转，进行放大缩小的操作，并能进行保存。

关键词： HTML5， Canvas，Javascript，图片编辑

Abstract

HTML5 is an emerging network standards, it is now faster and faster to replace the HTML4 standard.HTML5 is not a disruptive innovation, a core concept is to keep the smooth transition of all new features. Inside it contains a wealth of elements and attributes to support the now widely run using HTML 4.01 version of the specification.It is more important is the introduction of several new elements and attributes, they apply to many areas of the web page, such as data storage, audio, video, graphics, content presentation. HTML5 in the graphic aspects of strengthening key is the introduction of the Canvas element. Using the canvas element in the page, it will create a rectangular area, the operation can draw graphics on the inside. The graphics in a web page, we will be able to use Javascript to freely control it.

Designed in this paper is mainly in the HTML5 canvas technology in combination with Javascript and Css to create a picture editor online. On a web page about moving the picture up and down, clockwise, counterclockwise rotation rotate, zoom operation be saved.

Keywords: HTML5, Canvas, Javascript, Picture editor

目录

第一章 绪论 1

1.1 本文的研究背景 1

1.2 本文的研究思路 1

1.3 本文的研究目的 2

1.4 本文的结构安排 2

第二章 相关技术 3

2.1 HTML5 3

2.2 JavaScript 4

2.3 CSS 5

2.4 Apache 5

第三章 在线图片编辑器的需求与设计 7

3.1 在线图片编辑器的需求 7

3.2 在线图片编辑器的功能 7

3.3 在线图片编辑器的设计 7

第四章 在线编辑器功能的具体实现 10

4.1 图片位置定位功能的实现 10

4.1.1 图片位置 10

4.1.2 图片边角的位置 11

4.2 图片主要功能的具体实现 12

4.2.1 鼠标对图片的操作选择 12

4.2.2 图片的移动功能的实现 12

4.2.3 图片的缩放功能的实现 12

4.2.4 图片的旋转功能的实现 13

4.2.5 图片的截图功能的实现 13

4.2.6 图片的保存功能的实现 13

4.2.7 几张图片的选择分辨 14

4.3 服务器的选择和运行 14

第五章 编辑器的效果演示 16

5.1 图片在网页中的的加载显示 16

5.2 图片的编辑 17

5.2.1 图片的移动 17

5.2.2 图片的旋转 18

5.2.3 图片的缩小 19

5.2.4 图片的放大 20

5.2.5 图片的截图 21

5.2.6 图片的保存 22

第六章 结论 23

6.1 工作的总结 23

6.2 期待与展望 23

致谢 25

参考文献 26

附录： 28

第一章 绪论

1.1 本文的研究背景

在HTML4.01以及更早的版本时候，我们知道主要面向文档的方法的存在。在那个时候，Web的主要作用是用来显示和共享文档的。这些文档不仅是专业的研究数据，还有其他更普通的日常数据。Web出现的早期这个情况一般是都是广泛存在的。而现在越来越多的在线应用和动感活力的网站却开始涌现。它们主要是通过第三方的插件来实现，Web中的静态内容变得越来越少，而里面的越来越多的动态内容由用户自己的生成。Web已经不再是呆板的静态文档了，它更倾向于显示充满活力的动态数据。而HTML却不是为了这个目的而开发的，这个时候新的HTML标准出现了也就是HTML5。HTML5添加了许多新的语法内容，其中包括有lt;videogt;, lt;audiogt;和lt;canvasgt;元素，同时整合了SVG内容。这些元素主要是为了更轻松的在网页中添加和处理视频，声音，图形图片的内容而添加的。另外的有些新元素包括lt;navgt;,lt;headergt;,lt;articlegt;和lt;sectiongt;等,则是为了丰富数据里面的内容而添加的。新的属性的添加主要是为了能够丰富更多的内容的展现。当然同时也有一些属性和元素被移除掉了。其它的一些元素，比如lt;agt;, lt;citegt;和lt;menugt;都被重新修改，重新定义了。

而Canvas是HTML5的里面的一个重要的媒体元素，它的主要用途是处理或者从头创建2D图形，可以将它看做一个2D图形的环境。Canvas具有很大的发展潜力，它是一个2D平台，它可以做出让人想要的东西。通过使用Javascript API来操作canvas元素，可以创建响应用户交互的动态图形图片和动画。可以用它来基于HTML表格中的数据创建动态更新的数据可视化图形。