HTML5 Canvas入門學習教程

2020-03-24 17:51:48

字體：大中小

來源：轉載

供稿：網友

HTML5究竟什么是HTML5？在W3C HTML5的常見問題中，關于HTML5是這樣說明的：HTML5是一個開放的平臺下開發的免費許可條款。
具體來說，對這句話有以下兩種理解：

指一組共同構成了未來開放式網絡平臺的技術。這些技術包括HTML5規范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字體以及其他技術。這一套技術的邊界是非正式的，且隨時間變化的。
指HTML5規范，當然也是開放式網絡平臺的一部分。
Canvas的瀏覽器支持
以下我列出了最流行的Web瀏覽器以及它們開始支持Canvas元素的最小版本號。

演示運行結果如下：
HTML是由一個個形如尖括號的標簽元素組成，這些標簽通常是成對出現，并且標簽之間只能嵌套不能交叉。
擴展：
成對出現的叫做閉合標簽，單個出現的叫做單標簽。不管怎樣都是閉合的(單標簽可以不閉合，但是在XHTML中嚴格要求了閉合)。閉合標簽又分為開始標簽和結束標簽，如 body 是開始標簽， /body 是結束標簽。自標簽如 input/ br/ 等。
關于更多的標簽，建議大家自行了解一下。推薦W3school平臺自學。
這里我們著重講一下上述代碼中出現的標簽。
XML/HTML Code復制內容到剪貼板
這個標簽說明 Web 瀏覽器將在標準模式下呈現頁面。根據 W3C 定義的 HTML5 規范，這是 HTML5 文檔所必需的。這個標簽簡化了長期以來在不同的瀏覽器呈現 HTML 頁面時出現的奇怪差異。它通常為文檔中的第一行。
XML/HTML Code復制內容到剪貼板
這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是 title 標記符和 meta 標記符。
以下表格列出了HTML head 元素下的所有標簽和功能：

這個標簽說明 Web 瀏覽器使用的字符編碼模式，這里通常設置為UTF-8。如果沒有需要特別設置的沒必要改變它。這也是 HTML5 頁面需要的元素。
XML/HTML Code復制內容到剪貼板
這個標簽說明在瀏覽器窗口展示的 HTML 的標題。這是一個很重要的標記，它是搜索引擎用來在 HTML 頁面上收錄內容的主要信息之一。
XML/HTML Code復制內容到剪貼板
網頁中顯示的實際內容均包含在這2個 body 之間。
綜上，HTML5網頁是由第一行的 !doctype html 與 html 部分組成，而 html 主要分為兩部分由 head 標簽規定的頭部部分，和由 body 規定的主體部分。
這樣，我們就把最簡單的HTML網頁的基本結構給捋出來了。添加一個Canvas
在HTML中添加Canvas非常簡單，只需要在HTML的 body 部分，添加上 canvas 標簽就可以了！可以參考下面的代碼。
XML/HTML Code復制內容到剪貼板
!doctypehtml htmllang= zh head metacharset= UTF-8 title 基礎的HTML5頁面 /title /head body canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！ /canvas /body /html
由于結果頁面是一個完完全全的空白頁面，所以這里我就不貼圖了。大家可能會很好奇，為什么會是一個空白呢？（廢話，我還沒來得及畫畫呢！）Canvas的本意是畫布，也就是畫布的意思（廢話...），畫布在HTML5中是透明的，是不可見的。
那 canvas 標簽中的那段文本是什么意思呢？那是一旦瀏覽器執行HTML頁面時不支持Canvas，就會顯示這段文字，換言之，只要你的瀏覽器支持Canvas，頁面上就不會顯示這個文本。
那 canvas 中的id是什么意思？id是標簽的屬性之一，在JavaScript代碼中用來指定特定的 canvas 的名字，就像一個人的身份證號碼一樣，是唯一的。
為了更清楚的展示Canvas，以及方便之后的演示，我稍微修改了一下代碼，之后的繪圖都會在這個Canvas上繪制。
XML/HTML Code復制內容到剪貼板
divid= canvas-warp canvasid= canvas >運行結果：
對以上代碼有幾點說明：1.添加了 div 標簽，將 canvas 包裹其中，個人習慣，暫時并沒有什么卵用。
2.給 canvas 標簽指定了width和height屬性，規定了它的寬和高。
3.給 canvas 標簽添加了一個內聯樣式，使其變為塊級元素并居中顯示。關于CSS的內容這里不做說明，畢竟這不是本課程的主角，若做擴展會花費大量篇幅。引用Canvas元素
文檔對象模型(DOM)
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的瀏覽器大戰，雙方為了在JavaScript與JScript一決生死，于是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的杰作。
文檔對象模型代表了在 HTML 頁面上的所有對象。它是語言中立且平臺中立的。它允許頁面的內容和樣式被 Web 瀏覽器渲染之后再次更新。用戶可以通過 JavaScript 訪問 DOM。
在開始使用 canvas 前,首先需要了解兩個特定的 DOM 對象：window 和 document。window 對象是 DOM 的最高一級，需要對這個對象進行檢測來確保開始使用 Canvas 應用程序之前，已經加載了所有的資源和代碼。
document 對象包含所有在 HTML 頁面上的 HTML 標簽。需要對這個對象進行檢索來找出用 JavaScript 操縱 canvas 的實例。JavaScript放置位置
使用 JavaScript 為 Canvas 編程會產生一個問題：在創建的頁面中，從哪里啟動 JavaScript程序?
把 JavaScript 放進 HTML 頁面的 head 標簽中是個不錯的主意，這樣做的好處是很容易找到它，也是上一章我們介紹 head 中所提到的。但是，把 JavaScript 程序放在這里就意味著整個 HTML 頁面要加載完 JavaScrpit 才能配合 HTML 運行，這段 JavaScript 代碼也會在整個頁面加載前就開始執行了。結果就是，運行 JavaScript 程序之前必須檢查 HTML 頁面是否已經加載完畢。
最近有一個趨勢是將 JavaScript 放在 HTML 文檔結尾處的 /body 標簽之前，這樣就可以確保在 JavaScript 運行時整個頁面已經加載完畢。然而，由于在運行 canvas 程序前需要使用 JavaScript 測試頁面是否加載，因此最好還是將 JavaScript 放在 head 中。
不過本人不走尋常路(笑)，所以之后的案例，還是按照自己的編碼風格將JavaScript代碼放在了 body 的尾部。當然，如果JavaScript代碼有些多，就推薦使用加載外部 .js 文件的方式。代碼大致如下：
JavaScript Code復制內容到剪貼板
在實際項目開發中，都是將HTML、CSS、JS三者完全分離的。不過用于案例演示代碼略少，所以大多沒有使用加載外部 .js 文件的方式。
獲取canvas對象
獲取canvas對象其實就是一句話的事情。
JavaScript Code復制內容到剪貼板
var用于變量定義，由于JS是弱類型語言，所以定義啥變量都用var。跟在var之后的canvas是變量。使用document對象的getElementById()的方法，通過id獲取對象。之前我們為 canvas 標簽賦予了一個id，名叫canvas，所以該句話最后一個canvas是指 canvas 的id canvas。（是不是有點繞，需要自己多讀幾遍捋清楚。）
獲得畫筆(2D環境)
畫畫首先需要啥？畫筆啊。獲取canvas畫筆也是一句話的事情，就是直接使用剛才獲得的canvas對象，調用它的getContext( 2d )方法，即可。
JavaScript Code復制內容到剪貼板
這里的context便是畫筆了。
在其他教程中都是使用2D環境這個專有術語，我覺得畫筆更加形象。靈感引自Java中Graphics類的g畫筆，原理與之相同。
總結
準備工作只有三步：1.布置畫布：通過添加 canvas 標簽，添加canvas元素
2.獲取畫布：通過 canvas 標簽的id，獲得canvas對象
3.獲得畫筆：通過canvas對象的getContext( 2d )方法，獲得2D環境對應的代碼也就是三句話：JavaScript Code復制內容到剪貼板
canvasid= canvas /canvas varcanvas=document.getElementById( canvas ); varcontext=canvas.getContext( 2d );
1.JavaScript代碼需要包裹在 script 標簽中。2.window.onload = function(){}加載頁面后就要立即執行，表示網頁加載完執行后面的那個function函數體的內容。至此，畫布和畫筆已經準備完畢，接下來就讓我們使用畫筆(context對象)繪制出高逼格的圖像吧！覺醒吧！藝術家之魂！html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：XHTML基礎問答－給初學者

下一篇：html網頁插入圖片、加入地圖索引示例講解