今天，你將學(xué)習(xí)一項(xiàng)稱(chēng)為Canvas（畫(huà)布）的web技術(shù)，以及它和文檔對(duì)象模型（通常被稱(chēng)為DOM）的關(guān)聯(lián)。這項(xiàng)技術(shù)非常強(qiáng)大，因?yàn)樗箇eb開(kāi)發(fā)人員能夠通過(guò)使用JavaScript訪問(wèn)和修改HTML元素。
現(xiàn)在你可能想知道為什么我們需要大刀闊斧地使用JavaScript。簡(jiǎn)而言之，HTML和JavaScript是相互依存的，一些HTML組件，如canvas元素，并不能脫離JavaScript單獨(dú)使用。畢竟，如果我們不能在上面繪圖，那canvas能派什么用處呢？
為了更好地理解這個(gè)概念，我們一起通過(guò)一個(gè)示例項(xiàng)目來(lái)嘗試畫(huà)一個(gè)簡(jiǎn)單的笑臉。讓我們開(kāi)始吧。
開(kāi)始
首先創(chuàng)建一個(gè)新目錄來(lái)保存你的項(xiàng)目文件，然后打開(kāi)你最喜歡的文本編輯器或web開(kāi)發(fā)工具。一旦你這樣做了,你應(yīng)該創(chuàng)建一個(gè)空的index.html和一個(gè)空的script.js,之后我們將繼續(xù)編輯。
接下來(lái)，我們來(lái)修改index.html文件，這不會(huì)涉及很多東西，因?yàn)槲覀冺?xiàng)目的大部分代碼將用JavaScript編寫(xiě)。我們需要在HTML中做的是創(chuàng)建一個(gè)canvas元素和引用script.js，這相當(dāng)直截了當(dāng)：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html><body>
-
- <canvas id='canvas' width='640' height='480'></canvas>
- <script type='text/javascript' src='script.js'></script>
-
- </body></html>
-
這么解釋?zhuān)沂褂靡唤M標(biāo)記< html >和< body>，這樣，我們可以通過(guò)body為文檔添加更多的元素。抓住這個(gè)機(jī)會(huì)，我完成了一個(gè)id屬性為canvas的640*480的canvas元素。
這個(gè)屬性只是簡(jiǎn)單地為元素加上一個(gè)字符串，目的是為了唯一識(shí)別，稍后我們將利用這個(gè)屬性，在JavaScript文件中定位我們的canvas元素。接下來(lái)，我們?cè)偈褂?lt;script>標(biāo)記引用JavaScript文件，它指定JavaScript的語(yǔ)言類(lèi)型和script.js文件的路徑。
操作DOM
如其名稱(chēng)“文檔對(duì)象模型”，我們需要通過(guò)使用另一種語(yǔ)言，調(diào)用接口訪問(wèn)HTML文檔，在這里，我們使用的語(yǔ)言是JavaScript。為此，我們需要在內(nèi)置文檔對(duì)象上的布置一個(gè)簡(jiǎn)單引用。這個(gè)對(duì)象直接對(duì)應(yīng)于我們的< html >標(biāo)記，類(lèi)似的，它是整個(gè)項(xiàng)目的基礎(chǔ)，因?yàn)槲覀兛梢酝ㄟ^(guò)它來(lái)獲取元素，執(zhí)行變化。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById('canvas');
-
還記得我們?nèi)绾问褂胕d =“canvas”來(lái)定義一個(gè)canvas元素嗎？現(xiàn)在我們使用document.getElementById方法，從HTML文檔獲取這個(gè)元素，我們簡(jiǎn)單地傳遞匹配所需元素id的字符串?，F(xiàn)在我們已經(jīng)獲取了這個(gè)元素，接下來(lái)就可以用其進(jìn)行繪畫(huà)工作了。
為了使用canvas進(jìn)行繪畫(huà)，我們必須操作它的上下文。令人驚訝的是，一個(gè)canvas不包含任何繪圖的方法或?qū)傩?，但是它的上下文?duì)象有我們需要的所有方法。一個(gè)上下文定義如下所示：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- var context = canvas.getContext('2d');
-
每一個(gè)canvas有幾個(gè)不同的上下文，根據(jù)程序的目的，只需要一個(gè)二維的上下文就足夠了，它將獲得我們需要?jiǎng)?chuàng)建笑臉的所有繪圖方法。
在我們開(kāi)始之前，我必須告知您，上下文存儲(chǔ)了兩種顏色屬性，一個(gè)用于畫(huà)筆（stroke），一個(gè)用于填充（fill）。對(duì)于我們的笑臉，需要設(shè)置填充為黃色，畫(huà)筆為黑色。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- context.fillStyle = 'yellow';
- context.strokeStyle = 'black';
-
設(shè)置完上下文所需的顏色后，我們必須為臉畫(huà)一個(gè)圓。不幸的是，上下文中沒(méi)有圓的預(yù)定義方法，因此我們需要使用所謂的路徑（path）。路徑只是一系列的相連的直線和曲線，路徑在繪圖完成后關(guān)閉。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- context.beginPath();
- context.arc(320, 240, 200, 0, 2 * Math.PI);
- context.fill();
- context.stroke();
- context.closePath();
-
這樣解釋?zhuān)覀冞\(yùn)用上下文開(kāi)始一個(gè)新的路徑。接下來(lái)，我們?cè)邳c(diǎn)(320、240)上創(chuàng)建一個(gè)半徑為200像素的圓弧。最后兩個(gè)參數(shù)指定構(gòu)建圓弧的初始和最終角度，所以我們傳遞0和2 *Math.PI，來(lái)創(chuàng)建一個(gè)完整的圓。最后，我們運(yùn)用上下文基于我們已經(jīng)設(shè)置的顏色進(jìn)行填充并畫(huà)出路徑。
盡管關(guān)閉路徑不是腳本的功能所必須的，但我們還是需要關(guān)閉路徑，這樣就可以開(kāi)始繪制笑臉中新的眼睛和嘴。眼睛可以通過(guò)同樣的方式完成,每個(gè)眼睛需要較小的半徑和不同的位置。但首先我們必須記住設(shè)置填充顏色為白色。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- context.fillStyle = 'white';
-
- context.beginPath();
- context.arc(270, 175, 30, 0, 2 * Math.PI);
- context.fill();
- context.stroke();
- context.closePath();
-
- context.beginPath();
- context.arc(370, 175, 30, 0, 2 * Math.PI);
- context.fill();
- context.stroke();
- context.closePath();
-
以上是關(guān)于眼睛的所有代碼。現(xiàn)在嘴巴很相似，但這次我們不會(huì)填滿圓弧，我們的角度將配置為一個(gè)半圓。要做到這一點(diǎn),我們需要設(shè)置起始角度為零和結(jié)束角度為-1 * Math.PI。請(qǐng)記住,不要忘記將畫(huà)筆的顏色設(shè)置為紅色。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- context.fillStyle = 'red';
-
- context.beginPath();
- context.arc(320, 240, 150, 0, -1 * Math.PI);
- context.fill()
- context.stroke();
- context.closePath();
祝賀
干的不錯(cuò)。你已經(jīng)完成了本教程，你做了一個(gè)很棒的笑臉，同時(shí)學(xué)習(xí)了更多關(guān)于Canvas、HTML、JavaScript，和文檔對(duì)象模型的知識(shí)。如果你有任何問(wèn)題,請(qǐng)留言。
