【文章內(nèi)容簡(jiǎn)介】 t(contextId) 公開(kāi)在 Canvas 上繪圖需要的 API。惟一（當(dāng)前）可用的 contextID 是 2d。 height 設(shè)置 Canvas 的高度。默認(rèn)值是 150 像素。 width 設(shè)置 Canvas 的寬度。默認(rèn)值是 300 像素。 createLinearGradient(x1,y1,x2,y2) 創(chuàng)建一個(gè)線性漸變。起始坐標(biāo)為 x1,y1，結(jié)束坐標(biāo)為 x2,y2。 createRadialGradient(x1,y1,r1,x2,y2,r2) 創(chuàng)建一個(gè)放 射狀漸變。圓圈的起始坐標(biāo)是 x1,y1，半徑為 r1。圓圈的結(jié)束坐標(biāo)為 x2,y2，半徑為 r2。 addColorStop(offset,color) 向一個(gè)漸變添加一個(gè)顏色停止。顏色停止（ color stop） 是漸變中顏色更改發(fā)生的位置。 offset 必須介于 0 到 1 之間。 fillStyle 設(shè)置用于填充一個(gè)區(qū)域的顏色 在這里就 例如 說(shuō) ，fillStyle=39。rgb(255,0,0)39。. strokeStyle 設(shè)置用于繪制一根直線的顏色 在這里就 例如 說(shuō) ，fillStyle=39。rgb(255,0,0)39。. fillRect(x,y,w,h) 填充一個(gè)定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形。 strokeRect(x,y,w,h) 繪制一個(gè)定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形的輪廓。 moveTo(x,y) 將繪圖位置移動(dòng)到坐標(biāo) x,y。 lineTo(x,y) 從繪圖方法結(jié)束的最后位置到 x,y 繪制一條直線。 Canvas 元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成： script type=text/javascript var c=(mycanvas)。 var cxt=(2d)。 =FF0000。 (0, 0, 150, 75)。 /script JavaScript 使用 ID 來(lái)尋找 Canvas 元素： var c=(mycanvas)。 然后，創(chuàng)建 context 對(duì)象： var cxt=(2d)。 getContext(2d) 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，目前還沒(méi)有 3d 的對(duì)象。 下面的兩行代碼繪制一個(gè)紅色的矩形： 7 =FF0000。 (0, 0, 150, 75)。 fillStyle 方法將 方塊 染成 了 紅色， fillRect 則 方法規(guī)定了形狀、位置和尺寸。 相類似的就可以 通過(guò)瀏覽器提供的基礎(chǔ)方法，構(gòu)建出激動(dòng)人心的應(yīng)用。 第三節(jié) JavaScript 及 jQuery 簡(jiǎn)介 JavaScript是一種由 Netscape的 LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫(xiě)的客戶端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言，比如 Perl，遺留的速度問(wèn)題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有 ，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是 Netscape 的瀏覽器 Navigator 加入了JavaScript，提供了數(shù)據(jù)驗(yàn)證的基本功能。由于 AJAX 的出現(xiàn)， JavaScript 的功能被越來(lái)越多的豐富，能做的事情也越來(lái)越多，是 時(shí)代的象征。 一個(gè)完整的 JavaScript 實(shí)現(xiàn)是由以下 3 個(gè)不同部分組成的：核心（ ECMAScript）、文檔對(duì)象模型（ Document Object Model，簡(jiǎn)稱 DOM）、瀏覽器對(duì)象模型（ Browser Object Model，簡(jiǎn)稱 BOM）。 JavaScript 的一個(gè)重要功能就是面向?qū)ο蟮墓δ埽ㄟ^(guò)基于對(duì)象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方式進(jìn)行程序開(kāi)發(fā)。 jQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 JavaScript 框架。它是輕量級(jí)的 JS 庫(kù) (壓縮后只有 21k) ，它兼容 CSS3，還兼容各種瀏覽器（ IE +, FF +, Safari +, Opera +）。 jQuery使用戶能更方便地處理 HTML documents、 events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且方便地為網(wǎng)站提供AJAX 交互。 jQuery 還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。 jQuery能夠使用戶的 HTML頁(yè)面保持代碼和 HTML內(nèi)容分離，也 就是說(shuō)，不用再在 HTML里面插入一堆 JS來(lái)調(diào)用命令了，只需定義 id 即可。如今， jQuery 已經(jīng)成為最流行的 JavaScript 庫(kù)，在世界前 10000 個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò) 55%在使用 jQuery。 jQuery包含以下特點(diǎn) ： ① 動(dòng)態(tài)特效 ； ② 異步的 AJAX； ③ 通過(guò)插件來(lái)擴(kuò)展 ； ④ 方便的工具 例如瀏覽器版本判斷 ； ⑤ 漸進(jìn)增強(qiáng) ； ⑥ 鏈?zhǔn)秸{(diào)用 ； ⑦ 多瀏覽器 支持 Inter +、 +、 Firefox2+、 +、 +； 8 jQuery 庫(kù)是一個(gè)單獨(dú)的 JavaScript 文件，可以保存到本地或者服務(wù)器直接引用，也可以從多個(gè)公共服務(wù)器中選擇引用。有 Media Temple、 Google、 Microsoft 等多家公司給 jQuery提供 CDN 服務(wù)，比較常用的引用地址如下 ： 目前的版本是 （截止 2021 年 1 月） 。 最常使用的 jQuery基礎(chǔ)方法是 .ready()方法 ： $(document).ready (function () { //script goes here })。 或者其簡(jiǎn)寫(xiě) ： $(function () { //script goes here })。 當(dāng) DOM 加載完就可以執(zhí)行（比 更早） ， 在同一個(gè)頁(yè)面里可以多次出現(xiàn) .ready()。 實(shí)例： 為元素添加單擊事件，發(fā)生對(duì)象隱藏效果 。 html head script type=text/javascript $(document).ready (function () { $(p).click (function () { $(this).hide ()。 })。 })。 /script /head body pIf you click on me, I will disappear./p /body /html 結(jié)果：隱藏 頁(yè)面內(nèi)的 p標(biāo)簽 。 選擇器： jQuery 使用 sizzle 引擎，支持 CSS 選取， Xpath選取等方式。 以下列舉了幾個(gè)特征： 9 $(p) 選取全部 p 元素 ； $() 選取所有包含 class 為 intro的 p 元素 ； $(demo) 選取 id 為 demo 的元素 ； $([href]) 選取所有帶有 href 屬性的元素 ； $([href=39。39。]) 選取所有帶有 href 值等于 的元素 ； $([href!=39。39。]) 選取所有帶有 href 值不等于 的元素 ； $([href$=39。.jpg39。]) 選取所有 href 值以 .jpg 結(jié)尾的元素 ； $([href^=39。/imgaes/39。]) 選取所有 href 值以 /imgaes/ 開(kāi)頭的元素 ； 更多詳細(xì)信息請(qǐng)參見(jiàn) jQuery API 的 Selectors 部分。 事件處理： 直接綁定指定事件，事件類型即方法名，支持 click、 focus、 blur、 submit 等。 $(button).click (function () { //script goes here })。 用 on來(lái)綁定事件， off 來(lái)解綁事件，第一個(gè)參數(shù)為事件名，第二個(gè)參數(shù)為回調(diào)函數(shù)。 版本開(kāi)始支持。 $(button).onclick (function (){ //script goes here })。 在 或更早版本，需要用 bind/unbind（常規(guī)綁定）， live/die（預(yù)綁定）來(lái)替代 on/off。更多詳細(xì)信息請(qǐng)參見(jiàn) jQuery API 的 Events 部分。 動(dòng)態(tài)特效： $(msg).show (fast)。 $(msg).hide (slow)。 $(msg).fadeIn ()。 $(msg).fadeOut ()。 以上代碼實(shí)現(xiàn)一個(gè) ID 為 Msg的 jQuery對(duì)象的漸入和淡出。函數(shù)接受的參數(shù)除了快慢等，還可以接收整型，作為漸入或淡出的完成時(shí)間，單位為 MS。更多詳細(xì)信息請(qǐng)參見(jiàn) jQuery API的 Effects 部分。 第四節(jié) CSS3 簡(jiǎn)介 CSS 即層疊樣式表（ Cascading Stylesheet）。 在網(wǎng)頁(yè)制作時(shí)采用 CSS 技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的 控制。 只要對(duì)相應(yīng)的代碼做一 10 些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。 CSS3是 CSS 技術(shù)的升級(jí)版本， CSS3 語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來(lái)。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語(yǔ)言模塊 、背景和邊框 、文字特效 、多欄布局等。 CSS3 帶來(lái)無(wú)與倫比的頁(yè)面表現(xiàn)能力，而這些在以前只能靠圖片，多層的標(biāo)簽嵌套或者JS 才能實(shí)現(xiàn)，現(xiàn)在只需要幾行 CSS3 就能實(shí)現(xiàn)，效率也比原 來(lái)要高很多。 一、布局 Grid 布局應(yīng)用很廣泛，最簡(jiǎn)單的例子就是內(nèi)容的分欄顯示。 對(duì)于這個(gè)布局復(fù)雜的三欄網(wǎng)頁(yè)來(lái)說(shuō)，如果使用 CSS3Grid 布局的話，我們只需這樣寫(xiě)： body {columns:3。columngap:。} img {float:pagetopright。width:3gr。} 其中， body部分聲明頁(yè)面為 3 欄，欄間距為 英寸； img中 float 屬性指明圖片浮動(dòng)位置為頁(yè)面的右上角，而寬度為 3 個(gè)欄寬。只需這樣兩行 CSS，就可以實(shí)現(xiàn)這個(gè)復(fù)雜布局。 二、邊框 bordercolor：控制邊框顏色，并且有了更大的靈活性，可以產(chǎn)生漸變效果 ； borderimage：控制邊框圖象 ； bordercornerimage：控制邊框邊角的圖象 ； borderradius：能產(chǎn)生類似圓角矩形的效果 ； 三、背景 backgroundorigin：決定了背景在盒模型中的初始位置，提供了 3 個(gè)值， border, padding和 content； border：控制背景起始于左上角的邊框 ； padding：控制背景起始于左上角的留白 ； content：控制背景起始于左上角的內(nèi)容 ； backgroundclip：決定邊框是否覆蓋住背景（默認(rèn)是不覆蓋），提供了兩個(gè)值， border 和padding； border：會(huì)覆蓋住背景 ； padding：不會(huì)覆蓋背景 ； backgroundsize：可以指定背景大小，以象素或百分比顯示。當(dāng)指定為百分比時(shí)，大小會(huì)由所在區(qū)域的寬度、高度，以及 backgroundorigin的位置決定 ； multiple backgrounds：多重背景圖象，可以把不同背景圖象只放到一個(gè)塊元素里 。 11 四、 特性 ① 圓角表格，對(duì)應(yīng)屬性： borderradius。 ② 以往 對(duì)網(wǎng)頁(yè)上的文字加特效只能用 filter 這個(gè)屬性，這次 CSS3 中專門(mén)制訂了一個(gè)加文字特效的屬性，而且不止加陰影這種效果。對(duì)應(yīng)屬性： fonteffect。 ③ 豐富了對(duì)鏈接下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點(diǎn)線、虛線等等，更可對(duì)下劃線的顏色和位置進(jìn)行任意改變。（還有對(duì)應(yīng)頂線和中橫線的樣式，效果與下劃線類似）對(duì)應(yīng)屬性： textunderlinestyle， textunderlinecolor， textunderlinemode，textunderlineposition。 ④ 在文字下點(diǎn)幾個(gè)點(diǎn)或打個(gè)圈以示重點(diǎn)， CSS3 也開(kāi)