基于 H5 的画图工具

完整资料进入【数字空间】查看——baidu搜索"writebug"

第一章 绪论
1.1 研究的背景
计算机图形学是随着计算机及其外围设备而产生和发展起来的。它是近代计算机科学 与雷达电视及图象处理技术的发展汇合而产生的硕果。在造船、航空航天、汽车、电子、 机械、土建工程、影视广告、地理信息、轻纺化工等领域中的广泛应用，推动了这门学科 的不断发展，而不断解决应用中提出的各类新课题，又进一一步充实和丰富了这门学科的 内容。计算机出现不久,为了在绘图仪和阴极射线管(CRT)屏幕上输出图形，计算机图形学 随之诞生了。现在它已发展为对物体的模型和图象进行生成、存取和管理的新学科。[1]

canvas 是 HTML5 的一个自带的绘制图形图表、制作动画的标签,它本身没有绘图能 力，只是一个放置在 Web 页面上的画布，但它提供了许多方法用来绘制路径、图表和字符 等,实现图形绘制和动画制作可以使用 JavaScript 代码在 Web 页面上实现，不需要第三方 插件。Canvas 可以直接在客户端渲染图形或动画，无需在服务器端加工,避免了服务器端 存在运算速度不足、带宽有限等问题。

HTML5 之前，Web 实现绘制图形是使用 SVG、VML 等技术。SVG、 VML 是通过 XML 文档 描绘图形来实现一个矢图形。矢量图形不能满足现代移动设备的位图级别图像的需求,而 HTML5 引入 Canvas 后，可以在 Web 页面直接生成的位图级别的图像,画布区域中的每一格 像素都是可以控制的,可以生成复杂图形，甚至可以满足游戏界面等复杂的开发要求。[2]

1.2 本文研究内容与目的
本文结合计算机图形学中基本图形的扫描转换和图形变换原理与算法，如一维线框图 形直线、圆、椭圆的扫描转换问题，二维多边形的填充，字符的表示，图形的裁剪，由简 单图形生成复杂图形，二维三维图形的平移、旋转、变比、对称等，在 HTML 中的 canvas 实现出来。

第二章 需求分析
2.1 主要功能描述
用户可以在画布上画任意图形，可以保存、撤销、恢复等，且界面有良好操作提示 等，具体如下：

(1) 选择画图工具：用户可以通过侧边工具栏选择想要使用的画图工具，且每种工具 有相应的提示。

(2) 画图：根据用户选择的画图工具，在画布上通过鼠标点击移动，绘制点、直线、 折线、直角线、多边形、圆、椭圆、圆弧、椭圆弧、任意曲线、圆角矩形、矩形 及其字符；擦除；填充，且用户可以选择绘制的线宽及线型。

(3) 背景：用户可以更改画布的背景，且画布有网格线、标尺。

(4) 图形变换：用户可以选定在画布上的图元，在图元周围显示热点，用户根据热点 拖动鼠标移动图元、缩放、旋转、对称图元。图形在移动过程中能够根据网格线 自动对。

(5) 图元复制、剪切、粘贴：用户点击按钮或使用快捷键，对选择的图元进行复制、 剪切与粘贴。

(6) 图形的组合与打散：用户选择多个图元，根据提示将图元组合和打散。

(7) 操作的撤销与恢复：用户点击上方菜单栏或使用快捷键撤销和恢复上一步操作。

(8) 保存：用户点击上方菜单栏或使用快捷键，对当前画布进行保存。

2.2 开发环境
Hbuilder