搜尋
首頁web前端H5教程利用HTML5中的Canvas繪製一張笑臉的教學_html5教學技巧

201557180008373.jpg (600×436)今天,你將學習一項稱為Canvas(畫布)的web技術,以及它和文件物件模型(通常被稱為DOM)的關聯。這項技術非常強大,因為它使web開發人員能夠透過使用JavaScript來存取和修改HTML元素。

現在你可能想知道為什麼我們需要大刀闊斧地使用JavaScript。簡而言之,HTML和JavaScript是相互依存的,有些HTML元件,如canvas元素,並不能脫離JavaScript單獨使用。畢竟,如果我們不能在上面繪圖,那canvas能派什麼用處呢?

為了更好地理解這個概念,我們一起透過一個範例項目來嘗試畫一個簡單的笑臉。讓我們開始吧。
開始

先建立一個新目錄來儲存你的專案文件,然後開啟你最喜歡的文字編輯器或web開發工具。一旦你這樣做了,你應該創建一個空的index.html和一個空的script.js,之後我們將繼續編輯。

201557180130749.jpg (600×415)
接下來,我們來修改index.html文件,這不會涉及很多東西,因為我們專案的大部分程式碼將用JavaScript編寫。我們需要在HTML中做的是創建一個canvas元素和引用script.js,這相當直截了當:
 

XML/HTML Code複製內容到剪貼簿
  1. html>body身體>
  2. 身體
  3.         canvas id id width='640'  >'480'>canvas> 
  4.    
  5. script type type src='script.js'> script>  
  6.     
  7. body>html>   
  8.   
這麼解釋,我使用一組標記和,這樣,我們可以透過body為文件添加更多的元素。把握這個機會,我完成了一個id屬性為canvas的640*480的canvas元素。

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

操作DOM


如其名稱“文檔物件模型”,我們需要透過使用另一種語言,呼叫介面來存取HTML文檔,在這裡,我們使用的語言是JavaScript。為此,我們需要在內建文件物件上的佈置一個簡單引用。這個物件直接對應到我們的標記,類似的,它是整個專案的基礎,因為我們可以透過它來取得元素,執行變化。

 



XML/HTML Code
複製內容到剪貼簿
  1. var canvas = document.getElementBy>document
  2. .getElementBy; >
  3.   

還記得我們如何使用id =「canvas」來定義一個canvas元素嗎?現在我們使用document.getElementById方法,從HTML文件取得這個元素,我們簡單地傳遞符合所需元素id的字串。現在我們已經獲取了這個元素,接下來就可以用其進行繪畫工作了。


為了使用canvas進行繪畫,我們必須操作它的上下文。令人驚訝的是,一個canvas不包含任何繪圖的方法或屬性,但是它的上下文物件有我們需要的所有方法。一個上下文定義如下:

XML/HTML Code複製內容到剪貼簿
  1. var context = canvas.getContext('2d'); >
  2.   
每一個canvas有幾個不同的上下文,根據程式的目的,只需要一個二維的上下文就足夠了,它將獲得我們需要創建笑臉的所有繪圖方法。

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

 

XML/HTML Code複製內容到剪貼簿
  1. context.fillStyle = 'yellow';   ;   
  2. context.strokeStyle = 'black';   
  3. 'black'
  4. ;   
;   
  



設定完上下文所需的顏色後,我們必須為臉畫一個圓。不幸的是,上下文中沒有圓的預先定義方法,因此我們需要使用所謂的路徑(path)。路徑只是一系列的相連的直線和曲線,路徑在繪圖完成後會關閉。  
XML/HTML Code
  1. 複製內容到剪貼簿
  2. context.beginPath();   
  3. context.arc(320, 240, 200, 0, 2 * Math.PI);   
  4. context.fill();   
  5. context.stroke();   
  6. context.closePath();   
  



這樣解釋,我們運用上下文來開始一個新的路徑。接下來,我們在點(320、240)上建立一個半徑為200像素的圓弧。最後兩個參數指定建構圓弧的初始和最終角度,所以我們傳遞0和2 *Math.PI,來建立一個完整的圓。最後,我們運用上下文是基於我們已經設定的顏色進行填充並畫出路徑。
儘管關閉路徑不是腳本的功能所必須的,但我們還是需要關閉路徑,這樣就可以開始繪製笑臉中新的眼睛和嘴。眼睛可以透過同樣的方式完成,每個眼睛需要較小的半徑和不同的位置。但首先我們必須記住設定填充顏色為白色。  
XML/HTML Code複製內容到剪貼簿
  1. context.fillStyle = 'white';   
  2. ;  
  3.     
  4. context.beginPath();   
  5. context.arc(270, 175, 30, 0, 2 * Math.PI);   
  6. context.fill();   
  7. context.stroke();   
  8. context.closePath();   
  9.     
  10. context.beginPath();   
  11. context.arc(370, 175, 30, 0, 2 * Math.PI);   
  12. context.fill();   
  13. context.stroke();   
  14. context.closePath();   
  15.   

以上是所有關於眼睛的程式碼。現在嘴巴很相似,但這次我們不會填滿圓弧,我們的角度將配置為一個半圓。要做到這一點,我們需要設定起始角度為零和結束角度為-1 * Math.PI。請記住,不要忘記將畫筆的顏色設為紅色。
 

XML/HTML Code複製內容到剪貼簿
  1. context.fillStyle = 'red';   
  2. ;   
  3.     
  4. context.beginPath();   
  5. context.arc(320, 240, 150, 0, -1 * Math.PI);   
  6. context.fill()   
  7. context.stroke();   

context.closePath();   


恭喜 乾的不錯。你已經完成了本教程,你做了一個很棒的笑臉,同時學習了更多關於Canvas、HTML、JavaScript,和文件物件模型的知識。如果你有任何問題,請留言。
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5代碼的基礎:密鑰元素及其目的H5代碼的基礎:密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等,用於構建現代網頁。 1.定義頭部內容,2.用於導航鏈接,3.表示獨立文章內容,4.組織頁面內容,5.展示側邊欄內容,6.定義頁腳,這些元素增強了網頁的結構和功能性。

HTML5和H5:了解常見用法HTML5和H5:了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別,H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本,增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用,適用於各種移動設備。

HTML5:現代網絡的基礎(H5)HTML5:現代網絡的基礎(H5)Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本,由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強,提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤,如、、、等,使網頁結構更清晰,SEO效果更好。 HTML5支持多媒體元素和,無需第三方插件,提升了用戶體驗和加載速度。 HTML5增強了表單功能,引入了新的輸入類型如、等,提高了用戶體驗和表單驗證效率。

H5代碼:編寫清潔有效的HTML5H5代碼:編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼?答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等,提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性,使用適當縮進和註釋。 3.優化性能,通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤,如標籤未閉合,確保代碼有效性。

H5:如何增強網絡上的用戶體驗H5:如何增強網絡上的用戶體驗Apr 19, 2025 am 12:08 AM

H5通過多媒體支持、離線存儲和性能優化提升網頁用戶體驗。 1)多媒體支持:H5的和元素簡化開發,提升用戶體驗。 2)離線存儲:WebStorage和IndexedDB允許離線使用,提升體驗。 3)性能優化:WebWorkers和元素優化性能,減少帶寬消耗。

解構H5代碼:標籤,元素和屬性解構H5代碼:標籤,元素和屬性Apr 18, 2025 am 12:06 AM

HTML5代碼由標籤、元素和屬性組成:1.標籤定義內容類型,用尖括號包圍,如。 2.元素由開始標籤、內容和結束標籤組成,如內容。 3.屬性在開始標籤中定義鍵值對,增強功能,如。這些是構建網頁結構的基本單位。

了解H5代碼:HTML5的基本原理了解H5代碼:HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術,提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等,增強了網頁結構和SEO。 2.支持多媒體元素和,無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性,簡化了驗證過程。 4.提供了離線和本地存儲功能,提升了網頁性能和用戶體驗。

H5代碼:Web開發人員的最佳實踐H5代碼:Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括:1.使用正確的DOCTYPE聲明和字符編碼;2.採用語義化標籤;3.減少HTTP請求;4.使用異步加載;5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版