如何用HTML5中的Canvas繪制一張笑臉

這篇“如何用HTML5中的Canvas繪制一張笑臉”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何用HTML5中的Canvas繪制一張笑臉”文章吧。

創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，友情鏈接，1元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html><body>

</body></html>

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

這個(gè)屬性只是簡單地為元素加上一個(gè)字符串，目的是為了唯一識(shí)別，稍后我們將利用這個(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í)行變化。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

var canvas = document.getElementById('canvas');

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

var context = canvas.getContext('2d');

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

在我們開始之前，我必須告知您，上下文存儲(chǔ)了兩種顏色屬性，一個(gè)用于畫筆（stroke），一個(gè)用于填充（fill）。對于我們的笑臉，需要設(shè)置填充為黃色，畫筆為黑色。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

context.fillStyle = 'yellow';

context.strokeStyle = 'black';

設(shè)置完上下文所需的顏色后，我們必須為臉畫一個(gè)圓。不幸的是，上下文中沒有圓的預(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();

這樣解釋，我們運(yùn)用上下文開始一個(gè)新的路徑。接下來，我們在點(diǎn)(320、240)上創(chuàng)建一個(gè)半徑為200像素的圓弧。最后兩個(gè)參數(shù)指定構(gòu)建圓弧的初始和最終角度，所以我們傳遞0和2 *Math.PI，來創(chuàng)建一個(gè)完整的圓。最后，我們運(yùn)用上下文基于我們已經(jīng)設(shè)置的顏色進(jìn)行填充并畫出路徑。

盡管關(guān)閉路徑不是腳本的功能所必須的，但我們還是需要關(guān)閉路徑，這樣就可以開始繪制笑臉中新的眼睛和嘴。眼睛可以通過同樣的方式完成,每個(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。請記住,不要忘記將畫筆的顏色設(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();

以上就是關(guān)于“如何用HTML5中的Canvas繪制一張笑臉”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：如何用HTML5中的Canvas繪制一張笑臉
標(biāo)題網(wǎng)址：http://muchs.cn/article18/jejidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站排名、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容