今天，你將 學(xué)習(xí)一項(xiàng)稱為Canvas（畫布）的web技術(shù)，以及它和文檔對象模型（通常被稱為DOM）的關(guān)聯(lián)。這項(xiàng)技術(shù)非常強(qiáng)大，因?yàn)樗箇eb開發(fā)人員能夠通過使用JavaScript訪問和修改html' target='_blank'>HTML元素。

現(xiàn)在你可能想知道為什么我們需要大刀闊斧地使用JavaScript。簡而言之，HTML和JavaScript是相互依存的，一些HTML組件，如canvas元素，并不能脫離JavaScript單獨(dú)使用。畢竟，如果我們不能在上面繪圖，那canvas能派什么用處呢？

為了更好地理解這個(gè)概念，我們一起通過一個(gè)示例項(xiàng)目來嘗試畫一個(gè)簡單的笑臉。讓我們開始吧。

開始

首先創(chuàng)建一個(gè)新目錄來保存你的項(xiàng)目文件，然后打開你最喜歡的文本編輯器或web開發(fā)工具。一旦你這樣做了,你應(yīng)該創(chuàng)建一個(gè)空的index.html和一個(gè)空的script.js,之后我們將繼續(xù)編輯。

接下來，我們來修改index.html文件，這不會涉及很多東西，因?yàn)槲覀冺?xiàng)目的大部分代碼將用JavaScript編寫。我們需要在HTML中做的是創(chuàng)建一個(gè)canvas元素和引用script.js，這相當(dāng)直截了當(dāng)：

這么解釋，我使用一組標(biāo)記< html >和< body>，這樣，我們可以通過body為文檔添加更多的元素。抓住這個(gè)機(jī)會，我完成了一個(gè)id屬性為canvas的640*480的canvas元素。

這個(gè)屬性只是簡單地為元素加上一個(gè)字符串，目的是為了唯一識別，稍后我們將利用這個(gè)屬性，在JavaScript文件中定位我們的canvas元素。接下來，我們再使用<script>標(biāo)記引用JavaScript文件，它指定JavaScript的語言類型和script.js文件的路徑。

操作DOM

如其名稱“文檔對象模型”，我們需要通過使用另一種語言，調(diào)用接口訪問HTML文檔，在這里，我們使用的語言是JavaScript。為此，我們需要在內(nèi)置文檔對象上的布置一個(gè)簡單引用。這個(gè)對象直接對應(yīng)于我們的< html >標(biāo)記，類似的，它是整個(gè)項(xiàng)目的基礎(chǔ)，因?yàn)槲覀兛梢酝ㄟ^它來獲取元素，執(zhí)行變化。

還記得我們?nèi)绾问褂胕d =“canvas”來定義一個(gè)canvas元素嗎？現(xiàn)在我們使用document.getElementById方法，從HTML文檔獲取這個(gè)元素，我們簡單地傳遞匹配所需元素id的字符串。現(xiàn)在我們已經(jīng)獲取了這個(gè)元素，接下來就可以用其進(jìn)行繪畫工作了。

為了使用canvas進(jìn)行繪畫，我們必須操作它的上下文。令人驚訝的是，一個(gè)canvas不包含任何繪圖的方法或?qū)傩裕撬纳舷挛膶ο笥形覀冃枰乃蟹椒āＲ粋€(gè)上下文定義如下所示：

每一個(gè)canvas有幾個(gè)不同的上下文，根據(jù)程序的目的，只需要一個(gè)二維的上下文就足夠了，它將獲得我們需要創(chuàng)建笑臉的所有繪圖方法。

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。