【正文】 drawable=false。} //ie 禁止拖拽 =function(){return false。/canvas !后畫板，即主要顯示畫布 其中顏色板也是一個 Canvas，這里填充了一個全色系的 BMP圖像，鼠標(biāo)拖動時動態(tài)取色值即可。/canvas !前畫布，實(shí)現(xiàn)鼠標(biāo)軌跡跟蹤 canvas id=canvas2 width=600 height=450 style=border:1px solid 999。/canvas canvas id=canvas width=600 height=450 style=border:1px solid 999。 Your browser does not support the Canvas element. /canvas 24 第二節(jié) 前臺顯示實(shí)現(xiàn) 圖 前臺效果圖 頁面采用 DIV+CSS進(jìn)行 3欄的布局 !實(shí)現(xiàn)功能顏色選擇器 canvas id=canvas_color width=198 height=15 style=border:1px solid 999。 Your browser does not support the Canvas element. /canvas 四、實(shí)例 圖像 把一幅圖像放置到畫布上： 圖 圖像引入 JavaScript 代碼： script type=text/javascript var c=(myCanvas)。 (1,00FF00)。 Your browser does not support the Canvas element. /canvas 三、實(shí)例 漸變 使用您指定的顏色來繪制漸變背景： 圖 漸 變 JavaScript 代碼： script type=text/javascript var c=(myCanvas)。 (70,18,15,0,*2,true)。 Your browser does not support the Canvas element. /canvas 二、實(shí)例 圓形 通過規(guī)定尺寸、顏色和位置，來繪制一個圓： 22 圖 圓 JavaScript 代碼： script type=text/javascript var c= (myCanvas)。 (150, 50)。 21 第四章 功能的實(shí)現(xiàn) 第一節(jié) 簡單功能的實(shí)現(xiàn) 一、實(shí)例 線條 通過指定從何處開始，在何處結(jié)束，來繪制一條線： 圖 線條 JavaScript 代碼： script type=text/javascript var c=(myCanvas)。 工具點(diǎn)擊事件：改變畫圖模式，按鈕樣式，顏色設(shè)定，筆觸設(shè)定等。 ③ 仿照 Windows 畫圖板，頁面分為三欄，上方為顏色選擇器，粗細(xì)選擇器；左欄為工具選擇區(qū)；右欄為畫布。 設(shè)計(jì)的性能如下： ① 讓用戶不管怎樣操作都能得到用戶的目的。 ⑨ 仿制圖章：可以根據(jù)鼠標(biāo)拖動畫出相應(yīng)圖片。 ⑤ 直線：可以根據(jù)鼠標(biāo)拖動畫直線。 在通過對用戶的調(diào)查，對已經(jīng)知道的畫圖板程序的了解過后 ， 這個系統(tǒng)所要實(shí)現(xiàn)的功能如下： ① 設(shè)置圖片 url 可讀取圖片并設(shè)置為當(dāng)前畫布的背景。盡量讓用戶滿意。 反過來呢 ，做出來的程序安全系數(shù)不高，還會 額外 增加開發(fā)費(fèi)用，造成人力物力資源的嚴(yán)重浪費(fèi)。如果沒有正確的需求分析就不能做出滿意的軟件。 總體的設(shè)計(jì)思路是在一個網(wǎng)頁中添加一個 DIV 層，然后在這個 DIV層中添加 Canvas 元素作為他的基礎(chǔ)畫板， 再在此基礎(chǔ)上實(shí)現(xiàn)畫圖工具功能（例如鉛筆、放射線、直線、圓、矩形、取色器、線條大小、橡皮擦 、文字等）。雙擊一個 DOM對象，就能夠編輯它的變量或值，編輯的同時，你可能會發(fā)現(xiàn)它還有自動完成功能，當(dāng)你輸入 之后，按下 15 Tab 鍵就能補(bǔ)齊為 ，非常 方便。而且在調(diào)試 AJAX應(yīng)用的時候也是特別有用，你能夠在控制臺里看到每一個 XMLHttpRequests請求 post出去的參數(shù)、 URL， HTTP 頭以及回饋的內(nèi)容，原本似乎在幕后黑匣子里運(yùn)作的程序被清清楚楚地展示在你面前。 Firebug 的 JavaScript 調(diào)試器 是一個很不錯的 JavaScript 腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點(diǎn)、變量查看窗口一個不少。你可以在這個查看器中直接添加、修改、刪除一些 CSS 樣式表屬性，并在當(dāng)前頁面中直接看到修改后的結(jié)果。用戶可以利用它除錯、編輯、甚至刪改任何網(wǎng)站的 CSS、HTML、 DOM 以及 JavaScript 代碼。它集 HTML 查看和編輯、 JavaScript 控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā) JavaScript、 CSS、 HTML 和 AJAX 的得力助手。 Firefox 從發(fā)行初期就開始屢獲殊榮，下載數(shù)量持續(xù)增加，市場占有率不斷攀高。使用不同瀏覽器檢示功能， Dreamweaver 可以告知您在不同瀏覽器上執(zhí)行的成效如何。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。甚至可以排序或格式化表格群組， Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。 Dreamweaver 是唯一提供 Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。它現(xiàn)在有 Mac 和 Windows 系統(tǒng)的版本。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持 CSS2。 七、選擇器 12 CSS3 增加了更多的 CSS 選擇器，可以實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能，比如： nthchild()等。 六、文字效果 textshadow： 文字投影，可能是因?yàn)?MAC OSX 的 Safari 瀏覽器開始支持投影才特意增加的 。實(shí)現(xiàn)這樣的效果非常簡單，設(shè)置顏色的時候我們使用標(biāo)準(zhǔn)的 RGBA（）單位即可，例如 RGBA（ 255,0,0,）這樣就出現(xiàn)了一個紅色同時擁 有 alpha 透明為 的顏色。 RGBA colors： 和 HSLA colors 類似，加了個不透明度。以前一般都是作圖的時候用 HSL色譜，但這樣一來會包括更多的顏色。（還有對應(yīng)頂線和中橫線的樣式，效果與下劃線類似）對應(yīng)屬性： textunderlinestyle， textunderlinecolor， textunderlinemode，textunderlineposition。 11 四、 特性 ① 圓角表格，對應(yīng)屬性： borderradius。} 其中， body部分聲明頁面為 3 欄，欄間距為 英寸； img中 float 屬性指明圖片浮動位置為頁面的右上角，而寬度為 3 個欄寬。 對于這個布局復(fù)雜的三欄網(wǎng)頁來說，如果使用 CSS3Grid 布局的話，我們只需這樣寫： body {columns:3。以前的規(guī)范作為一個模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。 第四節(jié) CSS3 簡介 CSS 即層疊樣式表（ Cascading Stylesheet）。 $(msg).fadeOut ()。更多詳細(xì)信息請參見 jQuery API 的 Events 部分。 用 on來綁定事件， off 來解綁事件，第一個參數(shù)為事件名，第二個參數(shù)為回調(diào)函數(shù)。/imgaes/39。39。 選擇器： jQuery 使用 sizzle 引擎，支持 CSS 選取， Xpath選取等方式。 html head script type=text/javascript $(document).ready (function () { $(p).click (function () { $(this).hide ()。 最常使用的 jQuery基礎(chǔ)方法是 .ready()方法 ： $(document).ready (function () { //script goes here })。 jQuery能夠使用戶的 HTML頁面保持代碼和 HTML內(nèi)容分離，也 就是說，不用再在 HTML里面插入一堆 JS來調(diào)用命令了，只需定義 id 即可。 jQuery 是繼 prototype 之后又一個優(yōu)秀的 JavaScript 框架。于是 Netscape 的瀏覽器 Navigator 加入了JavaScript，提供了數(shù)據(jù)驗(yàn)證的基本功能。 fillStyle 方法將 方塊 染成 了 紅色， fillRect 則 方法規(guī)定了形狀、位置和尺寸。 然后，創(chuàng)建 context 對象： var cxt=(2d)。 var cxt=(2d)。 moveTo(x,y) 將繪圖位置移動到坐標(biāo) x,y。. strokeStyle 設(shè)置用于繪制一根直線的顏色 在這里就 例如 說 ，fillStyle=39。顏色停止（ color stop） 是漸變中顏色更改發(fā)生的位置。 createRadialGradient(x1,y1,r1,x2,y2,r2) 創(chuàng)建一個放 射狀漸變。 width 設(shè)置 Canvas 的寬度。 6 下面我們介紹下 Canvas 的方法 ： 表 Canvas 方法介紹 方法 用途 getContext(contextId) 公開在 Canvas 上繪圖需要的 API。 canvas id=mycanvasTag width=400 height=400 style=backgroundcolor:blue。畫布是一個矩形區(qū)域，您可以控制其每一像素。 Windows 畫圖程序一直伴隨著 Windows 各個版本，這個很簡單，幾乎沒有什么用處的程序擁有最基本的繪圖功能，很適合用來涂鴉。當(dāng)用戶要處理一些要求不是很高的工作時，可以利用畫圖的工具來完成，比如實(shí)現(xiàn)一些簡單的操作如畫直線，圖片，圖片圖片等功能。此外，移動平臺的 HTML5 比 PC平臺發(fā)展的更快。 Android +上的 Chrome 在硬件加速方面更是超越了原生瀏覽器的表現(xiàn)。目前國內(nèi)外主流瀏覽器均支持硬件加速，這對 HTML5 的發(fā)展無疑是個好消息。其中表現(xiàn)居首的是 Chrome for Android，而支持度相對較低的 Android 系統(tǒng)自帶的瀏覽器 Android Browser 對 HTML5 的支持度也在 60%以上。越來越多 PC 瀏覽器開始重視并且支持 HTML5發(fā)展的同時， HTML5 也越來越受到移動互聯(lián)網(wǎng)的重視。 六、 Canvas 對象 將給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離 Flash 和Silverlight，直接在瀏覽器中顯示圖形或動畫。 四、全新的，更合理的 Tag 多媒體對象將不再全部綁定在 object 或 embed Tag 中，而是視頻有視頻的 Tag，音頻有音頻的 Tag。 u， font， center， strike 這些標(biāo)簽則被完全去掉了。這種標(biāo)簽將有利于搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如 audio和 video標(biāo)記。 2021 年 12 月 17 日，萬維網(wǎng)聯(lián)盟（ W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的 HTML5規(guī)范已經(jīng)正式定稿。 HTML5 草案的前身名為 Web Applications ，于 2021 年被 WHATWG 提出，于 2021年被 W3C 接納，并成立了新的 HTML 工作團(tuán)隊(duì)。 HTML5 一個很有用實(shí)用的特性是用于繪畫的 Canvas 元素 ， Canvas 擁有許多繪制功能如畫筆、矩形、圓形、字符以及圖像處理的方法，他為人們在網(wǎng)頁繪圖及圖像處理帶來了方便。 HTM