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