溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么使用HTML5中的Canvas繪制笑臉

發(fā)布時間：2021-02-26 09:33:14 來源：億速云 閱讀：444 作者：清風(fēng) 欄目：web開發(fā)

這篇“怎么使用HTML5中的Canvas繪制笑臉”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“怎么使用HTML5中的Canvas繪制笑臉”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

html有什么特點

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。  3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

具體實現(xiàn)方法：

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

怎么使用HTML5中的Canvas繪制笑臉
接下來，我們來修改index.html文件，這不會涉及很多東西，因為我們項目的大部分代碼將用JavaScript編寫。我們需要在HTML中做的是創(chuàng)建一個canvas元素和引用script.js，這相當(dāng)直截了當(dāng)：

<!DOCTYPE html><body>
   <canvas id='canvas' width='640' height='480'></canvas>
   <script type='text/javascript' src='script.js'></script>
</body></html>

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

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

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

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

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

為了使用canvas進(jìn)行繪畫，我們必須操作它的上下文。令人驚訝的是，一個canvas不包含任何繪圖的方法或?qū)傩?，但是它的上下文對象有我們需要的所有方法。一個上下文定義如下所示：

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

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

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

context.fillStyle = 'yellow';   
context.strokeStyle = 'black';

設(shè)置完上下文所需的顏色后，我們必須為臉畫一個圓。不幸的是，上下文中沒有圓的預(yù)定義方法，因此我們需要使用所謂的路徑（path）。路徑只是一系列的相連的直線和曲線，路徑在繪圖完成后關(guān)閉。

context.beginPath();   
context.arc(320, 240, 200, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();

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

盡管關(guān)閉路徑不是腳本的功能所必須的，但我們還是需要關(guān)閉路徑，這樣就可以開始繪制笑臉中新的眼睛和嘴。眼睛可以通過同樣的方式完成,每個眼睛需要較小的半徑和不同的位置。但首先我們必須記住設(shè)置填充顏色為白色。

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)于眼睛的所有代碼?，F(xiàn)在嘴巴很相似，但這次我們不會填滿圓弧，我們的角度將配置為一個半圓。要做到這一點,我們需要設(shè)置起始角度為零和結(jié)束角度為-1 * Math.PI。請記住,不要忘記將畫筆的顏色設(shè)置為紅色。

context.fillStyle = 'red';   
context.beginPath();   
context.arc(320, 240, 150, 0, -1 * Math.PI);   
context.fill()   
context.stroke();   
context.closePath();

感謝你的閱讀，希望你對“怎么使用HTML5中的Canvas繪制笑臉”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手