鑰匙要點(diǎn)

• > HTML5畫(huà)布是一項(xiàng)強(qiáng)大的技術(shù)，它允許開(kāi)發(fā)人員使用JavaScript在瀏覽器中直接繪制圖形并創(chuàng)建動(dòng)畫(huà)。帆布元素使用寬度和高度屬性在HTML代碼中定義，其真實(shí)功率通過(guò)HTML5 Canvas API利用。 HTML5帆布功能是互動(dòng)的，能夠由所有主要瀏覽器提供動(dòng)畫(huà)，靈活和支持。它可用于一系列應(yīng)用程序，包括游戲，廣告，數(shù)據(jù)表示，教育和培訓(xùn)以及藝術(shù)與裝飾。
使用HTML5 Canvas，開(kāi)發(fā)人員需要一個(gè)代碼編輯器和具有HTML5畫(huà)布支持的瀏覽器。在HTML中創(chuàng)建了一個(gè)帆布元素，JavaScript用于通過(guò)完整的繪圖功能訪問(wèn)帆布區(qū)域，從而能夠生成動(dòng)態(tài)圖形。
• > HTML5畫(huà)布具有獨(dú)特的坐標(biāo)系，該系統(tǒng)將原點(diǎn)放在畫(huà)布的左上角。 X坐標(biāo)向右增加，Y坐標(biāo)向畫(huà)布的底部增加。該系統(tǒng)沒(méi)有可見(jiàn)的負(fù)點(diǎn)，因此使用負(fù)坐標(biāo)點(diǎn)定位的對(duì)象不會(huì)出現(xiàn)在頁(yè)面上。
>
對(duì)CSS動(dòng)畫(huà)感興趣嗎？請(qǐng)查看使用CSS創(chuàng)建動(dòng)畫(huà)，這是專(zhuān)家Web開(kāi)發(fā)人員Donovan Hutchinson的CSS過(guò)渡和關(guān)鍵幀動(dòng)畫(huà)的完整課程，可用于SitePoint成員。對(duì)于HTML5帆布動(dòng)畫(huà)的示例，請(qǐng)觀看下面使用HTML5畫(huà)布的插圖，這是我們開(kāi)始使用HTML5 Canvas Mini課程動(dòng)畫(huà)的視頻。
• > 加載玩家… 畫(huà)家工具包中最重要的工具之一是它們的畫(huà)布。它使他們可以自由地以幾乎無(wú)限的變化和組合來(lái)表達(dá)各種感覺(jué)，印象，思想等。自由只能受到兩件事的限制 - 他們的技能水平和想象力。
網(wǎng)絡(luò)開(kāi)發(fā)世界中的情況相似。隨著HTML5及其強(qiáng)大規(guī)格的持續(xù)進(jìn)展，Web開(kāi)發(fā)人員已經(jīng)獲得了過(guò)去不可能做的事情的能力。由于一項(xiàng)稱(chēng)為HTML5畫(huà)布的技術(shù)，繪制圖形和直接在瀏覽器中創(chuàng)建動(dòng)畫(huà)。。

什么是html5 canvas？

畫(huà)布元素是使用寬度和高度屬性在HTML代碼中定義的元素。但是，畫(huà)布元素的真正力量是通過(guò)利用HTML5帆布API來(lái)實(shí)現(xiàn)的。該API是通過(guò)編寫(xiě)可以通過(guò)完整的繪圖功能訪問(wèn)畫(huà)布區(qū)域的JavaScript來(lái)使用的，從而允許動(dòng)態(tài)生成的圖形。

html5畫(huà)布有什么好處？

>

這是您可能要考慮學(xué)習(xí)使用HTML5的Canvas功能的一些原因：

• 互動(dòng)性。畫(huà)布是完全互動(dòng)的。它可以通過(guò)偵聽(tīng)鍵盤(pán)，鼠標(biāo)或觸摸事件來(lái)響應(yīng)用戶(hù)的操作。因此，開(kāi)發(fā)人員不僅限于靜態(tài)圖形和圖像。
>
• >動(dòng)畫(huà)。畫(huà)布上繪制的每個(gè)對(duì)象都可以動(dòng)畫(huà)。從簡(jiǎn)單的彈跳球到復(fù)雜的前進(jìn)和逆運(yùn)動(dòng)學(xué)，這允許創(chuàng)建所有級(jí)別的動(dòng)畫(huà)。
• 靈活性。開(kāi)發(fā)人員幾乎可以使用畫(huà)布創(chuàng)建任何東西。它可以顯示線條，形狀，文本，圖像等 - 有或沒(méi)有動(dòng)畫(huà)。另外，還可以在畫(huà)布應(yīng)用程序中添加視頻和/或音頻。
>
• >瀏覽器/平臺(tái)支持。 HTML5帆布都由所有主要瀏覽器提供支持，并且可以在包括臺(tái)式機(jī)，平板電腦和智能手機(jī)在內(nèi)的各種設(shè)備上訪問(wèn)。
>
• 受歡迎程度。帆布的受歡迎程度正在迅速穩(wěn)定增長(zhǎng)，因此不乏可用的資源。
這是一個(gè)網(wǎng)絡(luò)標(biāo)準(zhǔn)。與Flash和Silverlight不同，Canvas是HTML5的一部分開(kāi)放技術(shù)。盡管并非所有瀏覽器都實(shí)現(xiàn)了其所有功能，但開(kāi)發(fā)人員可以確定帆布將無(wú)限期地存在。
• >開(kāi)發(fā)一次，到處奔跑。 HTML5畫(huà)布提供了很好的可移植性。與Flash和Silverlight不同，一旦創(chuàng)建了Canvas應(yīng)用程序幾乎可以在任何地方運(yùn)行 - 從最大的計(jì)算機(jī)到最小的移動(dòng)設(shè)備。
免費(fèi)且可訪問(wèn)的開(kāi)發(fā)工具。創(chuàng)建HTML5 Canvas應(yīng)用程序的基本工具只是瀏覽器和一個(gè)好的代碼編輯器。另外，還有許多很棒的免費(fèi)圖書(shū)館和工具來(lái)幫助開(kāi)發(fā)高級(jí)帆布開(kāi)發(fā)的開(kāi)發(fā)人員。
您可以使用HTML5 Canvas創(chuàng)建哪些應(yīng)用程序？
• >
好，畫(huà)布很棒。但是到底可以使用它呢？讓我們看看。

游戲。 HTML5畫(huà)布的功能集是生產(chǎn)各種2D和3D游戲的理想候選人。

廣告。 HTML5畫(huà)布是基于閃光燈的橫幅和廣告的絕佳替代品。它具有吸引買(mǎi)家注意的所有需要??的功能。

數(shù)據(jù)表示。 HTML5可以從全球數(shù)據(jù)源中收集數(shù)據(jù)，并使用它來(lái)生成具有帆布元素的視覺(jué)吸引力和交互式圖形和圖表。
教育和培訓(xùn)。 HTML5畫(huà)布可用于產(chǎn)生有效而有吸引力的學(xué)習(xí)體驗(yàn)，將文本，圖像，視頻和音頻結(jié)合在一起。
• 藝術(shù)與裝飾。具有一點(diǎn)點(diǎn)的想象力和畫(huà)布各種顏色，漸變，圖案，透明度，陰影和剪裁功能，可以繪制各種藝術(shù)和裝飾圖形。
• >現(xiàn)在我們知道為什么要學(xué)習(xí)帆布，讓我們看一下HTML5畫(huà)布的基礎(chǔ)知識(shí)以及如何開(kāi)始使用它。

  畫(huà)布渲染上下文

  每個(gè)HTML5畫(huà)布元素都必須具有a上下文。上下文定義了您將使用的HTML5帆布API。 2D上下文用于繪制2D圖形和操縱位圖圖像。 3D上下文用于3D圖形創(chuàng)建和操縱。后者實(shí)際上稱(chēng)為WebGL，它基于OpenGles。

  >

  入門(mén)

  開(kāi)始使用帆布，您只需要一個(gè)代碼編輯器和帶有HTML5帆布支持的瀏覽器。我使用Sublime Text和Google Chrome，但您可以使用任何您想要的任何東西。

  >

  我們的html開(kāi)始看起來(lái)像這樣：

  >

  <span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
  </span>
    <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
  </span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
  </span>    Please check caniuse.com/#feat=canvas for information on 
      browser support for canvas.<span><span><span></p</span>></span>
  </span>
    <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
  </span><span>                 if the browser doesn't support canvas -->
  </span>
  <span><span><span></canvas</span>></span></span>

  這是我們的JavaScript，我們可以在HTML頁(yè)面的底部包含在內(nèi)：

  <span>var canvas = document.getElementById('exampleCanvas'),
  </span>    context <span>= canvas.getContext('2d');
  </span>
      <span>// code examples will continue here...</span>

  默認(rèn)情況下，瀏覽器會(huì)創(chuàng)建寬度為300像素和150像素的帆布元素，即使在HTML中未指定這些元素。您可以通過(guò)指定寬度和高度來(lái)更改尺寸，就像我在HTML中所做的那樣。

  >

  >還請(qǐng)注意，我們已經(jīng)在JavaScript中使用了Canvas一個(gè)ID屬性。最后，如果您愿意，可以使用CSS添加邊框，使畫(huà)布通過(guò)薄框架可見(jiàn)。這不是必需的，它被用作視覺(jué)輔助，以便我們看到畫(huà)布元素的邊界。

  請(qǐng)注意，在開(kāi)口和關(guān)閉標(biāo)簽之間，我添加了如果瀏覽器不支持畫(huà)布，則將顯示這些內(nèi)容。這幾乎可以是較舊瀏覽器支持的任何類(lèi)型的內(nèi)容。

  >

  > JavaScript以?xún)尚虚_(kāi)頭。在第一行中，我們創(chuàng)建一個(gè)通過(guò)其ID緩存我們的畫(huà)布元素的變量。第二行創(chuàng)建了一個(gè)變量（上下文），該變量（上下文）使用getContext（）函數(shù)引用畫(huà)布的2D上下文。我們將使用上下文變量訪問(wèn)所有帆布繪圖功能和屬性。>

  >準(zhǔn)備好帆布，我們可以開(kāi)始嘗試使用帆布API。但是在此之前，讓我們澄清一下畫(huà)布功能的更多方面。

  > html5帆布元素尺寸與圖形尺寸

  除了畫(huà)布元素的寬度和高度屬性外，您還可以使用CSS設(shè)置帆布元素的大小。但是，用CSS對(duì)畫(huà)布元素進(jìn)行調(diào)整與設(shè)置元素的寬度和高度屬性不同。這是因?yàn)楫?huà)布實(shí)際上具有兩種尺寸：元素本身的大小和元素的繪圖表面的大小。
  設(shè)置元素的寬度和高度屬性時(shí)，您可以設(shè)置元素的大小和元素繪圖表面的大小；但是，當(dāng)您使用CSS尺寸大小畫(huà)布元素時(shí)，您僅設(shè)置元素的尺寸而不是繪圖表面。當(dāng)帆布元素的大小與其圖表面的大小不符時(shí)，瀏覽器會(huì)縮放圖表以適合元素。

  因此，最好將Canvas Element的寬度和高度屬性用于大小元素而不是使用CSS，這是一個(gè)好主意。

  了解帆布坐標(biāo)系

  在2D空間中，使用X和Y坐標(biāo)引用位置。 X軸水平延伸，Y軸垂直延伸。該中心的位置x = 0，y = 0，也可以表示為（0，0）。這種定位對(duì)象的定位方法（用于數(shù)學(xué)中）被稱(chēng)為笛卡爾坐標(biāo)系。 但是，畫(huà)布坐標(biāo)系將原點(diǎn)放置在畫(huà)布的左上角，x坐標(biāo)向右增加，y坐標(biāo)朝向畫(huà)布的底部。因此，與標(biāo)準(zhǔn)的笛卡爾坐標(biāo)空間不同，畫(huà)布空間沒(méi)有明顯的負(fù)點(diǎn)。使用負(fù)坐標(biāo)不會(huì)導(dǎo)致您的應(yīng)用程序失敗，但是使用負(fù)坐標(biāo)點(diǎn)定位的對(duì)象不會(huì)出現(xiàn)在頁(yè)面上。

  >基本畫(huà)布示例 如前所述，HTML5畫(huà)布讓您創(chuàng)建多種類(lèi)型的對(duì)象，包括線，曲線，路徑，形狀，文本等。在示例中，您可以看到其中的某些對(duì)象實(shí)際上是如何繪制的。我不會(huì)在帆布API上進(jìn)行廣泛的詳細(xì)信息；這些只是一些容易幫助您了解帆布如何工作的感覺(jué)。

  >

  繪圖線

  繪制一條線，我們使用四個(gè)帆布API方法。我們從BeginPath（）方法開(kāi)始，該方法指示瀏覽器準(zhǔn)備繪制新路徑。接下來(lái)，我們使用Moveto（X，Y）方法來(lái)設(shè)置該行的起點(diǎn)。然后lineto（x，y）方法設(shè)置了終點(diǎn)，并通過(guò)連接兩個(gè)點(diǎn)來(lái)繪制線路。

  在這一點(diǎn)上，該線將被繪制，但仍然是看不見(jiàn)的。為了使其可見(jiàn)，我們使用stroke（）方法顯示默認(rèn)黑色的行。
  請(qǐng)參見(jiàn)codepen上的sitepoint（@sitepoint）的筆帆布線示例。
  繪制矩形
  要繪制矩形，我們可以使用fillRect（x，y，width，高度）方法來(lái)設(shè)置坐標(biāo)和尺寸，以及填充屬性來(lái)設(shè)置填充顏色。

  <span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
  </span>
    <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
  </span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
  </span>    Please check caniuse.com/#feat=canvas for information on 
      browser support for canvas.<span><span><span></p</span>></span>
  </span>
    <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
  </span><span>                 if the browser doesn't support canvas -->
  </span>
  <span><span><span></canvas</span>></span></span>

  。
  請(qǐng)參見(jiàn)codepen上的sitepoint（@sitepoint）的筆帆布矩形示例。
  請(qǐng)注意，矩形位于左上角附近。>

  繪制文本

  <span>var canvas = document.getElementById('exampleCanvas'),
  </span>    context <span>= canvas.getContext('2d');
  </span>
      <span>// code examples will continue here...</span>

  >要在畫(huà)布上繪制文本，我們可以使用fillText（字符串，x，y）以及字體屬性來(lái)設(shè)置文本的字體，大小和樣式（類(lèi)似于CSS中的字體速記）。

  >

  請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆帆布文本示例。

  >您應(yīng)該知道，盡管使用HTML5 Canvas API簡(jiǎn)單繪圖很容易，但是創(chuàng)建復(fù)雜的形狀和動(dòng)畫(huà)需要一些數(shù)學(xué)和物理知識(shí)。關(guān)于該主題的最好的書(shū)之一是帶有JavaScript的Foundation HTML5動(dòng)畫(huà)。這本書(shū)是學(xué)習(xí)將事物從簡(jiǎn)單到復(fù)雜的動(dòng)畫(huà)移動(dòng)的絕佳資源。

  >

  在哪里可以了解更多？

  >

  如果您想在這里學(xué)習(xí)，有一些資源：

  帆布教程 - 關(guān)于MDN的出色教程，充滿(mǎn)了示例，插圖和詳細(xì)的解釋。
  > html5帆布元素指南 - 六個(gè)修訂版的初學(xué)者教程。
  > HTML5帆布教程 - Kineticjs Canvas庫(kù)的創(chuàng)建者Eric Rowell創(chuàng)建的完整教程。所有示例都是互動(dòng)的。您可以與他們一起玩并立即查看結(jié)果。
  • >
  加快畫(huà)布開(kāi)發(fā)
  >使用“ RAW” HTML5 CANVAS API可能是一項(xiàng)繁瑣的工作。這就是為什么您可以很好地學(xué)習(xí)它可以切換到一個(gè)可以加快速度并使您的畫(huà)布開(kāi)發(fā)變得更加容易的好帆布庫(kù)時(shí)的好主意。

  >

  以下是一些流行的選擇：
  kineticjs
  paper.js
  easeljs
  > Fabric.js
  > ocanvas
  >加快HTML5畫(huà)布開(kāi)發(fā)的另一種方法是將Adobe Illustrator的Ai-> Canvas插件使用。您可以在SitePoint上的本文中找到插件的概述。

  >

  結(jié)論

  就是這樣。我希望此介紹性的HTML5 Canvas教程為您提供了一個(gè)很好的起點(diǎn)，可以繼續(xù)學(xué)習(xí)和探索這項(xiàng)強(qiáng)大的技術(shù)。

  關(guān)于HTML5畫(huà)布

  的常見(jiàn)問(wèn)題（常見(jiàn)問(wèn)題解答）

  > SVG和HTML5 Canvas？
  SVG（可擴(kuò)展的向量圖形）和HTML5帆布是用于創(chuàng)建圖形的Web技術(shù)的什么區(qū)別。但是，它們的方法和用例有所不同。 SVG是一種基于向量的方法，其中每個(gè)繪制的形狀都被記住為對(duì)象。如果更改對(duì)象的屬性，則瀏覽器可以自動(dòng)重新渲染場(chǎng)景。 SVG非常適合交互式圖形和元素動(dòng)畫(huà)。另一方面，HTML5畫(huà)布是基于像素的。一旦繪制形狀，系統(tǒng)就會(huì)忘記。如果其屬性更改，則必須與整個(gè)場(chǎng)景一起重新繪制。這使得帆布非常適合圖形密集型游戲或諸如照片編輯軟件之類(lèi)的應(yīng)用程序。
  >如何將文本添加到帆布？
  >將文本添加到畫(huà)布中很簡(jiǎn)單。您可以使用fillText（text，x，y）方法，其中文本是要編寫(xiě)的字符串，而x和y是文本啟動(dòng)的坐標(biāo)。您還可以使用字體和填充屬性自定義文本的字體，尺寸和顏色。

  >我可以使用HTML5畫(huà)布進(jìn)行游戲開(kāi)發(fā)嗎？它的基于像素的本質(zhì)使其適合于在瀏覽器中平穩(wěn)運(yùn)行的復(fù)雜和圖形密集型游戲。但是，對(duì)于3D游戲，也使用帆布API的WebGL由于其硬件加速度功能而成為一個(gè)更好的選擇。

  如何使用HTML5 Canvas？提供了幾種繪制形狀的方法。例如，要繪制矩形，您可以使用fillRect（x，y，width，高度）方法。要繪制一個(gè)圓圈，您可以使用?。╔，Y，RADIUS，Startangle，disgangle）方法。您還可以使用路徑來(lái)繪制復(fù)雜的形狀。

  >

  如何使用HTML5帆布對(duì)對(duì)象進(jìn)行動(dòng)畫(huà)化？第二。每個(gè)redraw稱(chēng)為幀，對(duì)對(duì)象的屬性的更改是在框架之間進(jìn)行的，以產(chǎn)生運(yùn)動(dòng)的幻覺(jué)。這通常是使用requestAnimationFrame（）方法進(jìn)行的。

  >我可以與在帆布上繪制的對(duì)象進(jìn)行交互？

  與SVG不同，HTML5畫(huà)布一旦繪制對(duì)象就不記得它們。這意味著您不能直接將事件處理程序附加到他們。但是，您可以通過(guò)跟蹤javaScript中對(duì)象的屬性并在發(fā)生交互時(shí)重新繪制畫(huà)布來(lái)實(shí)現(xiàn)交互。使用Todataurl（）方法將畫(huà)布的內(nèi)容保存為圖像。此方法返回包含由類(lèi)型參數(shù)指定的格式表示圖像表示的數(shù)據(jù)URL（默認(rèn)為png）。
  我如何清除帆布？
  您可以清除整個(gè)整個(gè)使用透明處理（x，y，寬度，高度）方法的畫(huà)布。要清除整個(gè)畫(huà)布，您可以將x和y設(shè)置為0，將寬度和高度設(shè)置為帆布的寬度和高度。

  >

  我可以在所有瀏覽器中使用HTML5畫(huà)布嗎？在所有現(xiàn)代瀏覽器中都支持帆布，包括Chrome，F(xiàn)irefox，Safari，Opera和Edge。但是，Internet Explorer 8或更早的Internet Explorer中不支持它。
  >我如何處理HTML5 Canvas中的錯(cuò)誤？

  >

  >通常使用JavaScript中的try-catch塊來(lái)完成HTML5畫(huà)布中的錯(cuò)誤處理。但是，由于畫(huà)布是低級(jí)API，因此不提供詳細(xì)的錯(cuò)誤消息。因此，調(diào)試可能具有挑戰(zhàn)性，并且通常涉及大量的反復(fù)試驗(yàn)。

  >

以上是HTML5帆布教程：簡(jiǎn)介的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！