完整資料進(jìn)入【數(shù)字空間】查看——baidu搜索"writebug"?

第一章 緒論

1.1 研究的背景

計(jì)算機(jī)圖形學(xué)是隨著計(jì)算機(jī)及其外圍設(shè)備而產(chǎn)生和發(fā)展起來的。它是近代計(jì)算機(jī)科學(xué) 與雷達(dá)電視及圖象處理技術(shù)的發(fā)展匯合而產(chǎn)生的碩果。在造船、航空航天、汽車、電子、 機(jī)械、土建工程、影視廣告、地理信息、輕紡化工等領(lǐng)域中的廣泛應(yīng)用，推動(dòng)了這門學(xué)科 的不斷發(fā)展，而不斷解決應(yīng)用中提出的各類新課題，又進(jìn)一一步充實(shí)和豐富了這門學(xué)科的 內(nèi)容。計(jì)算機(jī)出現(xiàn)不久,為了在繪圖儀和陰極射線管(CRT)屏幕上輸出圖形，計(jì)算機(jī)圖形學(xué) 隨之誕生了?，F(xiàn)在它已發(fā)展為對(duì)物體的模型和圖象進(jìn)行生成、存取和管理的新學(xué)科。[1]

canvas 是 HTML5 的一個(gè)自帶的繪制圖形圖表、制作動(dòng)畫的標(biāo)簽,它本身沒有繪圖能 力，只是一個(gè)放置在 Web 頁面上的畫布，但它提供了許多方法用來繪制路徑、圖表和字符 等,實(shí)現(xiàn)圖形繪制和動(dòng)畫制作可以使用 JavaScript 代碼在 Web 頁面上實(shí)現(xiàn)，不需要第三方 插件。Canvas 可以直接在客戶端渲染圖形或動(dòng)畫，無需在服務(wù)器端加工,避免了服務(wù)器端 存在運(yùn)算速度不足、帶寬有限等問題。

HTML5 之前，Web 實(shí)現(xiàn)繪制圖形是使用 SVG、VML 等技術(shù)。SVG、 VML 是通過 XML 文檔 描繪圖形來實(shí)現(xiàn)一個(gè)矢圖形。矢量圖形不能滿足現(xiàn)代移動(dòng)設(shè)備的位圖級(jí)別圖像的需求,而 HTML5 引入 Canvas 后，可以在 Web 頁面直接生成的位圖級(jí)別的圖像,畫布區(qū)域中的每一格 像素都是可以控制的,可以生成復(fù)雜圖形，甚至可以滿足游戲界面等復(fù)雜的開發(fā)要求。[2]

1.2 本文研究內(nèi)容與目的

本文結(jié)合計(jì)算機(jī)圖形學(xué)中基本圖形的掃描轉(zhuǎn)換和圖形變換原理與算法，如一維線框圖 形直線、圓、橢圓的掃描轉(zhuǎn)換問題，二維多邊形的填充，字符的表示，圖形的裁剪，由簡 單圖形生成復(fù)雜圖形，二維三維圖形的平移、旋轉(zhuǎn)、變比、對(duì)稱等，在 HTML 中的 canvas 實(shí)現(xiàn)出來。

第二章 需求分析

2.1 主要功能描述

用戶可以在畫布上畫任意圖形，可以保存、撤銷、恢復(fù)等，且界面有良好操作提示 等，具體如下：

(1) 選擇畫圖工具：用戶可以通過側(cè)邊工具欄選擇想要使用的畫圖工具，且每種工具 有相應(yīng)的提示。

(2) 畫圖：根據(jù)用戶選擇的畫圖工具，在畫布上通過鼠標(biāo)點(diǎn)擊移動(dòng)，繪制點(diǎn)、直線、 折線、直角線、多邊形、圓、橢圓、圓弧、橢圓弧、任意曲線、圓角矩形、矩形 及其字符；擦除；填充，且用戶可以選擇繪制的線寬及線型。

(3) 背景：用戶可以更改畫布的背景，且畫布有網(wǎng)格線、標(biāo)尺。

(4) 圖形變換：用戶可以選定在畫布上的圖元，在圖元周圍顯示熱點(diǎn)，用戶根據(jù)熱點(diǎn) 拖動(dòng)鼠標(biāo)移動(dòng)圖元、縮放、旋轉(zhuǎn)、對(duì)稱圖元。圖形在移動(dòng)過程中能夠根據(jù)網(wǎng)格線 自動(dòng)對(duì)。

(5) 圖元復(fù)制、剪切、粘貼：用戶點(diǎn)擊按鈕或使用快捷鍵，對(duì)選擇的圖元進(jìn)行復(fù)制、 剪切與粘貼。

(6) 圖形的組合與打散：用戶選擇多個(gè)圖元，根據(jù)提示將圖元組合和打散。

(7) 操作的撤銷與恢復(fù)：用戶點(diǎn)擊上方菜單欄或使用快捷鍵撤銷和恢復(fù)上一步操作。

(8) 保存：用戶點(diǎn)擊上方菜單欄或使用快捷鍵，對(duì)當(dāng)前畫布進(jìn)行保存。

2.2 開發(fā)環(huán)境

Hbuilder