【正文】 mouseup39。 } })。 $(color_span).css(backgroundcolor,rgb( + pixel[0] + , + pixel[1] + , + pixel[2] + ))。//獲得 canvas 整數(shù)坐標(biāo)（下舍） var imageData = (canvasX, canvasY, 1, 1)。 if(type == 7){ //取色器 var canvasX = ( )。 =。mousedown39。 = 1。)。//畫筆粗細(xì) context2= (39。//直線 fill_canvas(ffffff)。惟一（當(dāng)前）可用的contextID 是 2d。)。//前畫布 context=(39。//改變顏色開關(guān) canvas=(canvas)。//默認(rèn)為鉛筆 drawable=false。//畫板大小 canvas_offset={x:$(canvas)[0].offsetLeft,y:$(canvas)[0].offsetTop}。} //ie 禁止拖拽 =function(){return false。 畫布 為兩個(gè)重疊的 Canvas，分為前景和后景，前景畫布重要用來顯示拖放畫筆的軌跡。/canvas !后畫板，即主要顯示畫布 其中顏色板也是一個(gè) Canvas，這里填充了一個(gè)全色系的 BMP圖像，鼠標(biāo)拖動(dòng)時(shí)動(dòng)態(tài)取色值即可。top:45px。/canvas !前畫布，實(shí)現(xiàn)鼠標(biāo)軌跡跟蹤 canvas id=canvas2 width=600 height=450 style=border:1px solid 999。top:45px。/canvas canvas id=canvas width=600 height=450 style=border:1px solid 999。 marginleft:10px。 Your browser does not support the Canvas element. /canvas 24 第二節(jié) 前臺(tái)顯示實(shí)現(xiàn) 圖 前臺(tái)效果圖 頁面采用 DIV+CSS進(jìn)行 3欄的布局 !實(shí)現(xiàn)功能顏色選擇器 canvas id=canvas_color width=198 height=15 style=border:1px solid 999。 var img=new Image() = (img, 0, 0)。 Your browser does not support the Canvas element. /canvas 四、實(shí)例 圖像 把一幅圖像放置到畫布上： 圖 圖像引入 JavaScript 代碼： script type=text/javascript var c=(myCanvas)。 (0, 0, 175, 50)。 (1,00FF00)。 23 var grd=(0,0,175,50)。 Your browser does not support the Canvas element. /canvas 三、實(shí)例 漸變 使用您指定的顏色來繪制漸變背景： 圖 漸 變 JavaScript 代碼： script type=text/javascript var c=(myCanvas)。 ()。 (70,18,15,0,*2,true)。 =FF0000。 Your browser does not support the Canvas element. /canvas 二、實(shí)例 圓形 通過規(guī)定尺寸、顏色和位置，來繪制一個(gè)圓： 22 圖 圓 JavaScript 代碼： script type=text/javascript var c= (myCanvas)。 ()。 (150, 50)。//方法返回一個(gè)用于在畫布上繪圖的環(huán)境。 21 第四章 功能的實(shí)現(xiàn) 第一節(jié) 簡單功能的實(shí)現(xiàn) 一、實(shí)例 線條 通過指定從何處開始，在何處結(jié)束，來繪制一條線： 圖 線條 JavaScript 代碼： script type=text/javascript var c=(myCanvas)。 畫布鼠標(biāo)拖動(dòng)事件：若是鉛筆則在當(dāng)前位置畫圖，若為拖動(dòng)的則在前背景畫出軌跡。 工具點(diǎn)擊事件：改變畫圖模式，按鈕樣式，顏色設(shè)定，筆觸設(shè)定等。 20 第四節(jié) JavaScript 設(shè)計(jì) 通過 JavaScript 的 onclick 事件實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后的 效果。 ③ 仿照 Windows 畫圖板，頁面分為三欄，上方為顏色選擇器，粗細(xì)選擇器；左欄為工具選擇區(qū)；右欄為畫布。 ② 實(shí)現(xiàn)了 Windows 畫圖板大部分功能，如：鉛筆、橡皮、直線、園、字體等功能。 設(shè)計(jì)的性能如下： ① 讓用戶不管怎樣操作都能得到用戶的目的。 圖 需求圖 第二節(jié) 基本原理 畫圖板制作的基本原理是通過鼠標(biāo)點(diǎn)擊畫板坐標(biāo)完成的，下圖是他的原理圖 畫圖板 路徑載入 打開 繪圖 設(shè)置 畫筆粗細(xì) 畫筆顏色 畫筆 圓 矩形 直線 橡皮擦 放射線 圖章 18 圖 原理圖 圖 原理圖 圖 原理圖 畫圖坐標(biāo)開始 當(dāng)鼠標(biāo)按下時(shí) 鼠標(biāo)松開結(jié)束 鼠標(biāo)移動(dòng)畫圖 鼠標(biāo)移動(dòng)無效 19 第三節(jié) 布局及界面設(shè)計(jì) 畫圖板主要是為用戶提供基本畫圖工具。 ⑨ 仿制圖章：可以根據(jù)鼠標(biāo)拖動(dòng)畫出相應(yīng)圖片。 ⑦ 矩形：可以根據(jù)鼠標(biāo)拖動(dòng)畫矩形。 ⑤ 直線：可以根據(jù)鼠標(biāo)拖動(dòng)畫直線。 ③ 粗細(xì)選擇器：可以選擇畫線的粗細(xì)。 在通過對(duì)用戶的調(diào)查，對(duì)已經(jīng)知道的畫圖板程序的了解過后 ， 這個(gè)系統(tǒng)所要實(shí)現(xiàn)的功能如下： ① 設(shè)置圖片 url 可讀取圖片并設(shè)置為當(dāng)前畫布的背景。用這種方法我們收集到了用戶的畫圖習(xí)慣。盡量讓用戶滿意。 我們作的是布局類似 與 Windows 畫圖板 ， 在設(shè)計(jì)時(shí)應(yīng)該考慮到用戶的需要和畫圖的習(xí)慣。 反過來呢 ，做出來的程序安全系數(shù)不高，還會(huì) 額外 增加開發(fā)費(fèi)用，造成人力物力資源的嚴(yán)重浪費(fèi)。所以在任何系統(tǒng)的開發(fā) 設(shè)計(jì) 之前，都應(yīng)該進(jìn)行相應(yīng)的需求分析。如果沒有正確的需求分析就不能做出滿意的軟件。按下線條大小按鈕，可以用于設(shè)置線條的粗細(xì)值。 總體的設(shè)計(jì)思路是在一個(gè)網(wǎng)頁中添加一個(gè) DIV 層，然后在這個(gè) DIV層中添加 Canvas 元素作為他的基礎(chǔ)畫板， 再在此基礎(chǔ)上實(shí)現(xiàn)畫圖工具功能（例如鉛筆、放射線、直線、圓、矩形、取色器、線條大小、橡皮擦 、文字等）。用了 Firebug的 DOM查看器，你的 JavaScript 從此找到了驅(qū)使對(duì)象，Web 開發(fā)也許就成了一件樂事。雙擊一個(gè) DOM對(duì)象，就能夠編輯它的變量或值，編輯的同時(shí)，你可能會(huì)發(fā)現(xiàn)它還有自動(dòng)完成功能，當(dāng)你輸入 之后，按下 15 Tab 鍵就能補(bǔ)齊為 ，非常 方便。 DOM(Document Object Model)里頭包含了大量的 Object 以及函數(shù)、事件，在從前，你要想從中查到需要的內(nèi)容，絕非易事，這好比你去了一個(gè)巨大的圖書館，想要找到幾本名字不太確切的小書，眾多的選擇會(huì)讓你無所適從。而且在調(diào)試 AJAX應(yīng)用的時(shí)候也是特別有用，你能夠在控制臺(tái)里看到每一個(gè) XMLHttpRequests請(qǐng)求 post出去的參數(shù)、 URL， HTTP 頭以及回饋的內(nèi)容，原本似乎在幕后黑匣子里運(yùn)作的程序被清清楚楚地展示在你面前。 如果你有一個(gè)網(wǎng)站已經(jīng)建成，然而它的 JavaScript 有性能上的問題或者不是太完美，可以通過面板上的 Profile 來統(tǒng)計(jì)每段腳本運(yùn)行的時(shí)間，查看到底是哪些語句執(zhí)行時(shí)間過長，一步步的來排除問題。 Firebug 的 JavaScript 調(diào)試器 是一個(gè)很不錯(cuò)的 JavaScript 腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點(diǎn)、變量查看窗口一個(gè)不少。 網(wǎng)絡(luò)狀況監(jiān)視器能幫你解決這個(gè)棘手問題。你可以在這個(gè)查看器中直接添加、修改、刪除一些 CSS 樣式表屬性，并在當(dāng)前頁面中直接看到修改后的結(jié)果。 如今的網(wǎng)頁設(shè)計(jì)言必稱 DIV+CSS，如果你是用 Table 套出來的 HTML頁面，就得按這規(guī)矩重構(gòu)一遍，否則顯得你不夠時(shí)髦！用 DIV 做出來的頁面的確能精簡 HTML 代碼， HTML標(biāo)簽減肥的結(jié)果就是 CSS 樣式表的編寫成了頁面制作的重頭戲。用戶可以利用它除錯(cuò)、編輯、甚至刪改任何網(wǎng)站的 CSS、HTML、 DOM 以及 JavaScript 代碼。例如 Yahoo! 的網(wǎng)頁速度優(yōu)化建議工具 YSlow。它集 HTML 查看和編輯、 JavaScript 控制臺(tái)、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā) JavaScript、 CSS、 HTML 和 AJAX 的得力助手。 Firefox在剛推出的時(shí)候是世界上最先進(jìn)的瀏覽器，當(dāng)時(shí)出現(xiàn)了很多網(wǎng)頁都只支持 Firefox瀏覽器，以至于其他瀏覽器為了適應(yīng)這些 網(wǎng)站，直到現(xiàn)在，幾乎所有的 UserAgent 都以Mozilla/ 開頭。 Firefox 從發(fā)行初期就開始屢獲殊榮，下載數(shù)量持續(xù)增加，市場占有率不斷攀高。 第六節(jié) 調(diào)試工具 Firefox 及 Firebug 簡介 Firefox（火狐）是一款著名的瀏覽器軟件，由 美國 Mozilla 與開源團(tuán)體共同開發(fā)。使用不同瀏覽器檢示功能， Dreamweaver 可以告知您在不同瀏覽器上執(zhí)行的成效如何。 全方位的呈現(xiàn)利用 Dreamweaver 設(shè) 計(jì)的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺(tái)的熱門瀏覽器上。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。當(dāng)您正使用 Dreamweaver 在設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁時(shí)，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。甚至可以排序或格式化表格群組， Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。幀 (frames)和表格的制作速度快的令您無法想像。 Dreamweaver 是唯一提供 Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。 Dreamweaver 能與您喜愛的設(shè)計(jì)工具，如 Playback 13 Flash， Shockwave 和外掛模組等搭配，不需離開 Dreamweaver 便可完成，整體運(yùn)用流程自然順暢。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。 Dreamweaver 自MX 版本開始，使用了 Opera 的排版引擎 Presto 作為網(wǎng)頁預(yù)覽。它現(xiàn)在有 Mac 和 Windows 系統(tǒng)的版本。 第五節(jié) 開發(fā)工具 DreamWeaver 介紹 DreamWeaver 是個(gè)原本由 Macromedia 公司所開發(fā)的著名網(wǎng)站開發(fā)工具。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持 CSS2。 其它模塊： media queries： 感覺叫媒體選擇比較合適，可以為網(wǎng)頁中不同的對(duì)