真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何去學(xué)習(xí)HTML5Canvas

今天就跟大家聊聊有關(guān)如何去學(xué)習(xí)HTML5Canvas，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千多家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為華池企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)，華池網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

HTML5

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

Canvas的瀏覽器支持
以下我列出了最流行的Web瀏覽器以及它們開(kāi)始支持Canvas元素的最小版本號(hào)。

SafariFirefoxIEChromeOpeariOS SafariAndroid Brower
3.23.59910.63.22.1


這里我推薦使用Chrome。

簡(jiǎn)單的HTML5頁(yè)面

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1.   
  
  
  
  
      
    基礎(chǔ)的HTML5頁(yè)面  
  
  
 Hello Airing!   
  

演示運(yùn)行結(jié)果如下：
如何去學(xué)習(xí)HTML5Canvas

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1.   

這個(gè)標(biāo)簽說(shuō)明 Web 瀏覽器將在標(biāo)準(zhǔn)模式下呈現(xiàn)頁(yè)面。根據(jù) W3C 定義的 HTML5 規(guī)范，這是 HTML5 文檔所必需的。這個(gè)標(biāo)簽簡(jiǎn)化了長(zhǎng)期以來(lái)在不同的瀏覽器呈現(xiàn) HTML 頁(yè)面時(shí)出現(xiàn)的奇怪差異。它通常為文檔中的第一行。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1.   

這是包含語(yǔ)言說(shuō)明的標(biāo)簽，例如，"en"為英語(yǔ)，"zh"為中文。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. ...   

這2個(gè)標(biāo)記符分別表示頭部信息的開(kāi)始和結(jié)尾。頭部中包含的標(biāo)記是頁(yè)面的標(biāo)題、序言、說(shuō)明等內(nèi)容，它本身不作為內(nèi)容來(lái)顯示，但影響網(wǎng)頁(yè)顯示的效果。頭部中最常用的標(biāo)記符是標(biāo)記符和<meta>標(biāo)記符。</p><p>以下表格列出了HTML head 元素下的所有標(biāo)簽和功能：</p><table><thead><trl><th>標(biāo)簽</th><th>描述</th></tr></thead><tbody><tr><td><code><head></code></td><td>定義了文檔的信息</td></tr><tr><td><code><title></code></td><td>定義了文檔的標(biāo)題</td></tr><tr><td><code><base href="http://weahome.cn/"/></code></td><td>定義了頁(yè)面鏈接標(biāo)簽的默認(rèn)鏈接地址</td></tr><tr><td><code><link></code></td><td>定義了一個(gè)文檔和外部資源之間的關(guān)系</td></tr><tr><td><code><meta></code></td><td>定義了HTML文檔中的元數(shù)據(jù)</td></tr><tr><td><code><script></code></td><td>定義了客戶(hù)端的腳本文件</td></tr><tr><td><code><style></code></td><td>定義了HTML文檔的樣式文件</td></tr></tbody></table><p>XML/HTML Code復(fù)制內(nèi)容到剪貼板</p><ol><li><p><meta charset="UTF-8">  </p></li></ol><p>這個(gè)標(biāo)簽說(shuō)明 Web 瀏覽器使用的字符編碼模式，這里通常設(shè)置為UTF-8。如果沒(méi)有需要特別設(shè)置的沒(méi)必要改變它。這也是 HTML5 頁(yè)面需要的元素。</p><p>XML/HTML Code復(fù)制內(nèi)容到剪貼板</p><ol><li><p><title>...   

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. ...   

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

添加一個(gè)Canvas
在HTML中添加Canvas非常簡(jiǎn)單，只需要在HTML的部分，添加上標(biāo)簽就可以了！可以參考下面的代碼。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

基礎(chǔ)的HTML5頁(yè)面   
  
      
    你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
        

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1.   
  
  
  
基礎(chǔ)的Canvas  
  
  
  
  
      
    你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！   
      
       

運(yùn)行結(jié)果：
如何去學(xué)習(xí)HTML5Canvas

對(duì)以上代碼有幾點(diǎn)說(shuō)明：

1.添加了

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

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

引用Canvas元素


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

window 對(duì)象是 DOM 的最高一級(jí)，需要對(duì)這個(gè)對(duì)象進(jìn)行檢測(cè)來(lái)確保開(kāi)始使用 Canvas 應(yīng)用程序之前，已經(jīng)加載了所有的資源和代碼。
document 對(duì)象包含所有在 HTML 頁(yè)面上的 HTML 標(biāo)簽。需要對(duì)這個(gè)對(duì)象進(jìn)行檢索來(lái)找 出用 JavaScript 操縱的實(shí)例。

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1.   

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


獲取canvas對(duì)象
獲取canvas對(duì)象其實(shí)就是一句話(huà)的事情。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. var canvas = document.getElementById("canvas");  

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. var context = canvas.getContext("2d");  

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


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

1.布置畫(huà)布：通過(guò)添加標(biāo)簽，添加canvas元素
2.獲取畫(huà)布：通過(guò)標(biāo)簽的id，獲得canvas對(duì)象
3.獲得畫(huà)筆：通過(guò)canvas對(duì)象的getContext("2d")方法，獲得2D環(huán)境

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1.    
var canvas = document.getElementById("canvas");   
var context = canvas.getContext("2d");

完整代碼如下。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1.    
   
   
       
    基礎(chǔ)的Canvas   
   
  
   
   
       
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！   
       
                 

  •   

    • 如何去學(xué)習(xí)HTML5Canvas

    注意幾點(diǎn)：

    1.JavaScript代碼需要包裹在