利用HTML5中的Canvas繪製笑臉的程式碼-H5教程-PHP中文網

首頁

web前端

H5教程

利用HTML5中的Canvas繪製笑臉的程式碼

不言

Jul 02, 2018 am 11:21 AM

canvashtml5

這篇文章主要介紹了利用HTML5中的Canvas繪製一張笑臉的教程,使用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，這相當直截了當：

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

這麼解釋，我使用一組標記，這樣，我們可以透過body為文件添加更多的元素。把握這個機會，我完成了一個id屬性為canvas的640*480的canvas元素。

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

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

var canvas = document.getElementById(&#39;canvas&#39;);

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

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

var context = canvas.getContext(&#39;2d&#39;);

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

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

context.fillStyle = &#39;yellow&#39;;   
context.strokeStyle = &#39;black&#39;;

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

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

這樣解釋，我們運用上下文開始一個新的路徑。接下來，我們在點(320、240)上建立一個半徑為200像素的圓弧。最後兩個參數指定建構圓弧的初始和最終角度，所以我們傳遞0和2 *Math.PI，來建立一個完整的圓。最後，我們運用上下文是基於我們已經設定的顏色進行填充並畫出路徑。

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

context.fillStyle = &#39;white&#39;;   
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();

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

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

恭喜

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

js HTML5 canvas繪製圖片的方法

HTML5和CSS3實作3D展示商品資訊的程式碼

HTML5 Canvas實作繪製一個像素寬的細線

以上是利用HTML5中的Canvas繪製笑臉的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

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

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

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

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

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

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

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

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

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles