佳木斯湛栽影视文化发展公司
主頁 > 知識庫 > HTML5 Canvas入門學(xué)習(xí)教程

HTML5 Canvas入門學(xué)習(xí)教程
熱門標簽：百度競價點擊價格的計算公式 網(wǎng)站建設(shè) 智能手機 硅谷的囚徒呼叫中心 美圖手機 檢查注冊表項 阿里云 使用U盤裝系統(tǒng)

HTML5

究竟什么是HTML5？在W3C HTML5的常見問題中，關(guān)于HTML5是這樣說明的：HTML5是一個開放的平臺下開發(fā)的免費許可條款。
具體來說，對這句話有以下兩種理解：
“
指一組共同構(gòu)成了未來開放式網(wǎng)絡(luò)平臺的技術(shù)。這些技術(shù)包括HTML5規(guī)范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字體以及其他技術(shù)。這一套技術(shù)的邊界是非正式的，且隨時間變化的。
指HTML5規(guī)范，當然也是開放式網(wǎng)絡(luò)平臺的一部分。

”
Canvas的瀏覽器支持
以下我列出了最流行的Web瀏覽器以及它們開始支持Canvas元素的最小版本號。

Safari Firefox IE Chrome Opear iOS Safari Android Brower
3.2 3.5 9 9 10.6 3.2 2.1


這里我推薦使用Chrome。

簡單的HTML5頁面

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  
  2.   
  3. <html lang="zh">  
  4.   
  5. <head>  
  6.     <meta charset="UTF-8">  
  7.     <title>基礎(chǔ)的HTML5頁面</title>  
  8. </head>  
  9.   
  10. <body> Hello Airing! </body>  
  11.   
  12. </html>  

演示運行結(jié)果如下：

HTML是由一個個形如尖括號<>的標簽元素組成，這些標簽通常是成對出現(xiàn)，并且標簽之間只能嵌套不能交叉。
擴展：
成對出現(xiàn)的叫做閉合標簽，單個出現(xiàn)的叫做單標簽。不管怎樣都是閉合的(單標簽可以不閉合，但是在XHTML中嚴格要求了閉合)。閉合標簽又分為開始標簽和結(jié)束標簽，如<body>是開始標簽，</body>是結(jié)束標簽。自標簽如<input/> <br/>等。
關(guān)于更多的標簽，建議大家自行了解一下。推薦W3school平臺自學(xué)。
這里我們著重講一下上述代碼中出現(xiàn)的標簽。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  

這個標簽說明 Web 瀏覽器將在標準模式下呈現(xiàn)頁面。根據(jù) W3C 定義的 HTML5 規(guī)范，這是 HTML5 文檔所必需的。這個標簽簡化了長期以來在不同的瀏覽器呈現(xiàn) HTML 頁面時出現(xiàn)的奇怪差異。它通常為文檔中的第一行。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html lang="en">  

這是包含語言說明的<html>標簽，例如，"en"為英語，"zh"為中文。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <head>...</head>   

這2個標記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標記是頁面的標題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。頭部中最常用的標記符是<title>標記符和<meta>標記符。

以下表格列出了HTML head 元素下的所有標簽和功能：

標簽 描述
<head> 定義了文檔的信息
<title> 定義了文檔的標題
<base> 定義了頁面鏈接標簽的默認鏈接地址
<link> 定義了一個文檔和外部資源之間的關(guān)系
<meta> 定義了HTML文檔中的元數(shù)據(jù)
<script> 定義了客戶端的腳本文件
<style> 定義了HTML文檔的樣式文件

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <meta charset="UTF-8">  

這個標簽說明 Web 瀏覽器使用的字符編碼模式，這里通常設(shè)置為UTF-8。如果沒有需要特別設(shè)置的沒必要改變它。這也是 HTML5 頁面需要的元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <title>...</title>   

這個標簽說明在瀏覽器窗口展示的 HTML 的標題。這是一個很重要的標記，它是搜索引擎用來在 HTML 頁面上收錄內(nèi)容的主要信息之一。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>...</body>   

網(wǎng)頁中顯示的實際內(nèi)容均包含在這2個<body>之間。
綜上，HTML5網(wǎng)頁是由第一行的<!doctype html>與<html>部分組成，而<html>主要分為兩部分——由<head>標簽規(guī)定的頭部部分，和由<body>規(guī)定的主體部分。
這樣，我們就把最簡單的HTML網(wǎng)頁的基本結(jié)構(gòu)給捋出來了。

添加一個Canvas
在HTML中添加Canvas非常簡單，只需要在HTML的<body>部分，添加上<canvas>標簽就可以了！可以參考下面的代碼。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html><html lang="zh"><head><meta charset="UTF-8"><title>基礎(chǔ)的HTML5頁面</title> </head>  
  2. <body>  
  3.     <canvas id="canvas">  
  4.     你的瀏覽器居然不支持Canvas？！趕快換一個吧??！   
  5.     </canvas></body>    
  6. </html>  

由于結(jié)果頁面是一個完完全全的空白頁面，所以這里我就不貼圖了。大家可能會很好奇，為什么會是一個空白呢？（廢話，我還沒來得及畫畫呢?。〤anvas的本意是畫布，也就是畫布的意思（廢話...），畫布在HTML5中是透明的，是不可見的。
那<canvas>標簽中的那段文本是什么意思呢？那是一旦瀏覽器執(zhí)行HTML頁面時不支持Canvas，就會顯示這段文字，換言之，只要你的瀏覽器支持Canvas，頁面上就不會顯示這個文本。
那<canvas>中的id是什么意思？id是標簽的屬性之一，在JavaScript代碼中用來指定特定的<canvas>的名字，就像一個人的身份證號碼一樣，是唯一的。
為了更清楚的展示Canvas，以及方便之后的演示，我稍微修改了一下代碼，之后的繪圖都會在這個Canvas上繪制。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  
  2. <html lang="zh">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>基礎(chǔ)的Canvas</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div id="canvas-warp">  
  10.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">  
  11.     你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
  12.     </canvas>  
  13. </div>  
  14. </body>    
  15. </html>  

運行結(jié)果：

對以上代碼有幾點說明：

1.添加了<div>標簽，將<canvas>包裹其中，個人習(xí)慣，暫時并沒有什么卵用。
2.給<canvas>標簽指定了width和height屬性，規(guī)定了它的寬和高。
3.給<canvas>標簽添加了一個內(nèi)聯(lián)樣式，使其變?yōu)閴K級元素并居中顯示。

關(guān)于CSS的內(nèi)容這里不做說明，畢竟這不是本課程的主角，若做擴展會花費大量篇幅。

引用Canvas元素


文檔對象模型(DOM)
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強大的功能。微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網(wǎng)頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的杰作。
文檔對象模型代表了在 HTML 頁面上的所有對象。它是語言中立且平臺中立的。它允許頁面的內(nèi)容和樣式被 Web 瀏覽器渲染之后再次更新。用戶可以通過 JavaScript 訪問 DOM。
在開始使用<canvas>前,首先需要了解兩個特定的 DOM 對象：window 和 document。

window 對象是 DOM 的最高一級，需要對這個對象進行檢測來確保開始使用 Canvas 應(yīng)用程序之前，已經(jīng)加載了所有的資源和代碼。
document 對象包含所有在 HTML 頁面上的 HTML 標簽。需要對這個對象進行檢索來找 出用 JavaScript 操縱<canvas>的實例。

JavaScript放置位置
使用 JavaScript 為 Canvas 編程會產(chǎn)生一個問題：在創(chuàng)建的頁面中，從哪里啟動 JavaScript程序?
把 JavaScript 放進 HTML 頁面的<head>標簽中是個不錯的主意，這樣做的好處是很容易找到它，也是上一章我們介紹<head>中所提到的。但是，把 JavaScript 程序放在這里就意味著整個 HTML 頁面要加載完 JavaScrpit 才能配合 HTML 運行，這段 JavaScript 代碼也會在整個頁面加載前就開始執(zhí)行了。結(jié)果就是，運行 JavaScript 程序之前必須檢查 HTML 頁面是否已經(jīng)加載完畢。
最近有一個趨勢是將 JavaScript 放在 HTML 文檔結(jié)尾處的</body>標簽之前，這樣就可以確保在 JavaScript 運行時整個頁面已經(jīng)加載完畢。然而，由于在運行<canvas>程序前需要使用 JavaScript 測試頁面是否加載，因此最好還是將 JavaScript 放在<head>中。
不過本人不走尋常路(笑)，所以之后的案例，還是按照自己的編碼風(fēng)格將JavaScript代碼放在了<body>的尾部。當然，如果JavaScript代碼有些多，就推薦使用加載外部 .js 文件的方式。代碼大致如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <script type="text/javascript" src="bootstarp.js"></script>  

在實際項目開發(fā)中，都是將HTML、CSS、JS三者完全分離的。不過用于案例演示代碼略少，所以大多沒有使用加載外部 .js 文件的方式。


獲取canvas對象
獲取canvas對象其實就是一句話的事情。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var canvas = document.getElementById("canvas");  

var用于變量定義，由于JS是弱類型語言，所以定義啥變量都用var。跟在var之后的canvas是變量。使用document對象的getElementById()的方法，通過id獲取對象。之前我們?yōu)?lt;canvas>標簽賦予了一個id，名叫canvas，所以該句話最后一個canvas是指<canvas>的id——canvas。（是不是有點繞，需要自己多讀幾遍捋清楚。）
獲得畫筆(2D環(huán)境)
畫畫首先需要啥？畫筆啊。獲取canvas畫筆也是一句話的事情，就是直接使用剛才獲得的canvas對象，調(diào)用它的getContext("2d")方法，即可。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var context = canvas.getContext("2d");  

這里的context便是畫筆了。
在其他教程中都是使用2D環(huán)境這個專有術(shù)語，我覺得畫筆更加形象。靈感引自Java中Graphics類的g畫筆，原理與之相同。


總結(jié)
準備工作只有三步：

1.布置畫布：通過添加<canvas>標簽，添加canvas元素
2.獲取畫布：通過<canvas>標簽的id，獲得canvas對象
3.獲得畫筆：通過canvas對象的getContext("2d")方法，獲得2D環(huán)境

對應(yīng)的代碼也就是三句話：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <canvas id=“canvas”></canvas>   
  2. var canvas = document.getElementById("canvas");   
  3. var context = canvas.getContext("2d");  

完整代碼如下。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>基礎(chǔ)的Canvas</title>   
  6. </head>   
  7.   
  8. <body>   
  9. <div id="canvas-warp">   
  10.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">   
  11.         你的瀏覽器居然不支持Canvas？！趕快換一個吧?。?  
  12.     </canvas>   
  13. </div>   
  14.   
  15. <script>   
  16. window.onload = function(){   
  17.     var canvas = document.getElementById("canvas");   
  18.     var context = canvas.getContext("2d");   
  19. }   
  20. </script>   
  21. </body>   
  22.   
  23. </html>   
  24.   

注意幾點：

1.JavaScript代碼需要包裹在<script>標簽中。

2.window.onload = function(){}加載頁面后就要立即執(zhí)行，表示網(wǎng)頁加載完執(zhí)行后面的那個function函數(shù)體的內(nèi)容。

至此，畫布和畫筆已經(jīng)準備完畢，接下來就讓我們使用畫筆(context對象)繪制出高逼格的圖像吧！覺醒吧！藝術(shù)家之魂！

標簽：山南 懷化 通遼 煙臺 湘潭 黃山 賀州 湖北

巨人網(wǎng)絡(luò)通訊聲明：本文標題《HTML5 Canvas入門學(xué)習(xí)教程》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266
    武邑县| 连城县| 锦州市| 承德县| 搜索| 雷州市| 衡山县| 柳林县| 来宾市| 安顺市| 湘乡市| 汤原县| 南丰县| 营山县| 左权县| 太仆寺旗| 定南县| 日土县| 泸水县| 崇仁县| 中西区| 昭苏县| 三门县| 吴桥县| 延寿县| 乐至县| 土默特右旗| 三河市| 克拉玛依市| 银川市| 宜宾市| 定西市| 合阳县| 福州市| 潼关县| 太湖县| 内江市| 遵化市| 甘德县| 庐江县| 泉州市|