搜尋

首頁 >web前端 >H5教程 >HTML5 Canvas入門學習教學_html5教學技巧

HTML5 Canvas入門學習教學_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:45:412103瀏覽

HTML5

究竟什麼是HTML5？在W3C HTML5的常見問題中，關於HTML5是這樣說明的：HTML5是一個開放的平台下開發的免費授權條款。
具體來說，對這句話有以下兩種理解：
「
指一組共同構成了未來開放式網路平台的技術。這些技術包括HTML5規範、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字體以及其他技術。
」

Canvas的瀏覽器支援
以下我列出了最受歡迎的Web瀏覽器以及它們開始支援Canvas元素的最小版本號。


這裡我推薦使用Chrome。

簡單的HTML5頁面

XML/HTML Code複製內容到剪貼簿
  1. html>  
  2.   
  3. html lang=lang=lang
    4. =
  4. lang
    5. =
  5. lang=lang=lang
    6. > 🎜>
  6. >      head>  
  7.     meta charset charset charset
  8. >       title
  9. >
  10. title>   head
  11. >  
  12.    body
>
 Hello Airing! 


2016317110813836.jpg (850×500) Hello cing! 






身體
>  
      
  1. html
    2. >
  


示範運行結果如下： HTML是由一個形如尖括號的標籤元素組成，這些標籤通常是成對出現，並且標籤之間只能嵌套不能交叉。
擴充：
成對出現的叫做閉合標籤，單一出現的叫做單標籤。不管怎樣都是閉合的(單標籤可以不閉合，但是在XHTML中嚴格要求了閉合)。閉合標籤又分為開始標籤和結束標籤，如是開始標籤，是結束標籤。自標籤如
等。
    關於更多的標籤，建議大家自行了解。推薦W3school平台自學。
  1. 這裡我們著重講一下上述程式碼中出現的標籤。 XML/HTML Code複製內容到剪貼簿 html>  


這個標籤說明 Web 瀏覽器將在標準模式下呈現頁面。根據 W3C 定義的 HTML5 規範，這是 HTML5 文件所必需的。這個標籤簡化了長期以來在不同的瀏覽器呈現 HTML 頁面時出現的奇怪差異。它通常為文檔中的第一行。
XML/HTML Code
複製內容到剪貼簿 html lang=lang=lang=lang=>   這是包含語言說明的標籤，例如，"en"為英語，"zh"為中文。 XML/HTML Code複製內容到剪貼簿
  1. head>...head>   

這2個標記符分別表示頭部訊息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，而是影響網頁顯示的效果。頭部中最常用的標記符是

<title>標記符和<meta>標記符。

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

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

XML/HTML Code複製內容到剪貼簿
  1. meta charset=charset=charset=
charset
>

>

  
這個標籤說明 Web 瀏覽器使用的字元編碼模式，這裡通常設定為UTF-8。如果沒有需要特別設定的沒必要改變它。這也是 HTML5 頁面需要的元素。
  1. XML/HTML Code複製內容到剪貼簿 title>...
title

>

   
這個標籤說明在瀏覽器視窗顯示的 HTML 的標題。這是一個很重要的標記，它是搜尋引擎用來在 HTML 頁面上收錄內容的主要資訊之一。
  1. XML/HTML Code複製內容到剪貼簿 body>...
body

>

   

網頁中顯示的實際內容均包含在這2個之間。
綜上，HTML5網頁是由第一行的與部分組成，而主要分為兩部分－由標籤規定的頭部部分，和由規定的主體部分。
這樣，我們就把最簡單的HTML網頁的基本結構給捋出來了。 增加一個Canvas
在HTML中加入Canvas非常簡單，只需要在HTML的部分，加上上標籤就可以了！可以參考下面的程式碼。 XML/HTML Code複製內容到剪貼簿
  1. html>htmlhtml ="zh">頭>meta charset="UTF-8">>>>> title>基礎的HTML5頁面title> 
  2. head>  
    3. body>       canvas id=
  3. "canvas"
    4. >
  4.        你的瀏覽器居然不支援Canvas？ ！趕快換一個吧！ ！        canvas>
  5. body>     
html

>

  

由於結果頁面是一個完整的空白頁面，所以這裡我就不貼圖了。大家可能會很好奇，為什麼會是一個空白呢？ （廢話，我還沒來得及畫畫呢！）Canvas的本意是畫布，也就是畫布的意思（廢話...），畫佈在HTML5中是透明的，是看不見的。 那標籤中的那段文字是什麼意思呢？那就是一旦瀏覽器執行HTML頁面時不支援Canvas，就會顯示這段文字，換言之，只要你的瀏覽器支援Canvas，頁面上就不會顯示這個文字。 那中的id是什麼意思？ id是標籤的屬性之一，在JavaScript程式碼中用來指定特定的的名字，就像一個人的身分證號碼一樣，是唯一的。 為了更清楚的展示Canvas，以及方便之後的演示，我稍微修改了一下程式碼，之後的繪圖都會在這個Canvas上繪製。
XML/HTML Code複製內容到剪貼簿
  1. html>  
  2. html lang="zh" >  
  3. 頭>  
  4. 元 字符集="UTF- 8">  
  5. 標題>基礎畫布基礎畫布基礎畫布
    6. >   頭
  6. >
    7.   
  7.   
    8. 身體
  8. >   div id=
    9. id
  9. =id=id=id=id=id=id=id> 」>       畫布
    10.  
  10. id
    11. =
  11. "畫布"  樣式=「邊框：1 像素實線#aaaaaa；顯示：區塊；邊距：50 像素自動；」
  12. 寬度="800" 高度
    13.  
  13. 🎜>" 600">       你的瀏覽器居然不支援Canvas？ ！趕緊換一個吧！ ！   
  14.     畫布>  
 🎜>
div>   身體>     html>  

運行結果：
2016317111155702.jpg (850×500)

以上程式碼有幾點說明：

1.新增了

標籤，將包裹其中，個人習慣，暫時並沒有什麼卵用。
2.給標籤指定了width和height屬性，規定了它的寬和高。
3.為標籤添加了一個內聯樣式，使其變為區塊級元素並居中顯示。

關於CSS的內容這裡不做說明，畢竟這不是本課程的主角，若做擴充會花費大量篇幅。

引用Canvas元素


文件物件模型(DOM)
文件物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充標誌語言的標準程式介面。 Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平台及瀏覽器無法正常顯示。 DOM即是當時蘊釀出來的傑作。
文檔物件模型代表了在 HTML 頁面上的所有物件。它是語言中立且平台中立的。它允許頁面的內容和樣式被 Web 瀏覽器渲染之後再次更新。使用者可以透過 JavaScript 存取 DOM。
在開始使用前,首先需要了解兩個特定的 DOM 物件：window 和 document。

window 物件是 DOM 的最高一級，需要對這個物件進行偵測來確保開始使用 Canvas 應用程式之前，已經載入了所有的資源和程式碼。
document 物件包含所有在 HTML 頁面上的 HTML 標籤。需要對這個物件進行檢索來找 出用 JavaScript 操縱的實例。

JavaScript放置位置
使用JavaScript 為Canvas 程式設計會產生一個問題：在建立的頁面中，從哪裡啟動JavaScript程式?
把JavaScript 放進HTML 頁面的

標籤中是個不錯的主意，這樣做的好處是很容易找到它，也是上一章我們介紹中所提到的。但是，把 JavaScript 程式放在這裡就代表整個 HTML 頁面要載入完 JavaScrpit 才能配合 HTML 運行，這段 JavaScript 程式碼也會在整個頁面載入前就開始執行了。結果就是，執行 JavaScript 程式之前必須檢查 HTML 頁面是否已經載入完畢。
最近有一個趨勢是將 JavaScript 放在 HTML 文件結尾處的標籤之前，這樣就可以確保在 JavaScript 運行時整個頁面已經加載完畢。然而，由於在運行程式前需要使用 JavaScript 測試頁面是否加載，因此最好還是將 JavaScript 放在中。
不過本人不走尋常路(笑)，所以之後的案例，還是按照自己的編碼風格將JavaScript程式碼放在了的尾部。當然，如果JavaScript程式碼有些多，就推薦使用載入外部 .js 檔案的方式。程式碼大致如下：
JavaScript Code複製內容到剪貼簿
  1. <script>"text/javascript" src="bootstarp.js"   

在實際專案開發中，都是將HTML、CSS、JS三者完全分開的。不過用於案例示範程式碼略少，所以大多沒有使用載入外部 .js 檔案的方式。



取得canvas物件
取得canvas物件其實就是一句話的事情。

JavaScript Code複製內容到剪貼簿
  1. var canvas = document.getElementById("canvas");  

var用於變數定義，由於JS是弱型別語言，所以定義啥變數都用var。跟在var之後的canvas是變數。使用document物件的getElementById()的方法，透過id取得物件。之前我們為標籤賦予了一個id，名叫canvas，所以該句話最後一個canvas是指的id——canvas。 （是不是有點繞，需要自己多讀幾遍捋清楚。）
取得畫筆(2D環境)
畫畫首先需要啥？畫筆啊。取得canvas畫筆也是一句話的事情，就是直接使用剛才取得的canvas對象，呼叫它的getContext("2d")方法，即可。

JavaScript Code複製內容到剪貼簿
  1. var context = canvas.getContext("2d");;
這裡的context便是畫筆了。
在其他教學課程都是使用2D環境這個專有術語，我覺得畫筆更有形象。靈感引自Java中Graphics類別的g畫筆，原理與之相同。


總結


準備工作只有三步驟：
1.佈置畫布：透過新增標籤，新增canvas元素2.取得畫布：透過標籤的id，取得canvas物件

3.取得畫筆：透過canvas物件的getContext ("2d")方法，獲得2D環境


對應的程式碼也就是三句話：

JavaScript Code
複製內容到剪貼簿
      
  2. var canvas = document.getElementById("canvas""canvas"
  3. var context = canvas.getContext("2d"); 
完整程式碼如下。


JavaScript Code
複製內容到剪貼簿
  1. html>   
  2. "zh">   
  3.   
  4.     <meta> "UTF-8">   
  5.     <title>基礎的Canvas   
  6.   
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas" style="border 1px sol5; " width="800" height="600">  
    11.         你的瀏覽器居然不支援Canvas？ ！趕快換一個吧！ ！   
    12.        
  
    •   
    • <script>   
    • window.onload = 
  • function(){   
    •     
  • var canvas = document.getElementById("canvas"     
    • var
  •  context = canvas.getContext("2d"; }   
    •   
    •   
    •   
    •   
    •   
    • 注意幾點：
    1.JavaScript程式碼需要包裹在<script>標籤中。

    2016317111405657.png (1433×771)2.window.onload = function(){}載入頁面後就要立即執行，表示網頁載入完執行後面的那個function函數體的內容。

    至此，畫布和畫筆已經準備完畢，接下來就讓我們使用畫筆(context物件)繪製出高逼格的圖像吧！覺醒吧！藝術家之魂！

    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：HTML5 Canvas基本線條繪製的實例教學_html5教學技巧下一篇：HTML5 Canvas基本線條繪製的實例教學_html5教學技巧

    相關文章

    看更多