鑰匙要點

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

什么是html5 canvas？

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

html5畫布有什么好處？

>

這是您可能要考慮學習使用HTML5的Canvas功能的一些原因：

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

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

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

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

  畫布渲染上下文

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

  >

  入門

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

  >

  我們的html開始看起來像這樣：

  >

  <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頁面的底部包含在內(nèi)：

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

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

  >

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

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

  >

  > JavaScript以兩行開頭。在第一行中，我們創(chuàng)建一個通過其ID緩存我們的畫布元素的變量。第二行創(chuàng)建了一個變量（上下文），該變量（上下文）使用getContext（）函數(shù)引用畫布的2D上下文。我們將使用上下文變量訪問所有帆布繪圖功能和屬性。>

  >準備好帆布，我們可以開始嘗試使用帆布API。但是在此之前，讓我們澄清一下畫布功能的更多方面。

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

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

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

  了解帆布坐標系

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

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

  >

  繪圖線

  繪制一條線，我們使用四個帆布API方法。我們從BeginPath（）方法開始，該方法指示瀏覽器準備繪制新路徑。接下來，我們使用Moveto（X，Y）方法來設置該行的起點。然后lineto（x，y）方法設置了終點，并通過連接兩個點來繪制線路。

  在這一點上，該線將被繪制，但仍然是看不見的。為了使其可見，我們使用stroke（）方法顯示默認黑色的行。
  請參見codepen上的sitepoint（@sitepoint）的筆帆布線示例。
  繪制矩形
  要繪制矩形，我們可以使用fillRect（x，y，width，高度）方法來設置坐標和尺寸，以及填充屬性來設置填充顏色。

  <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>

  。
  請參見codepen上的sitepoint（@sitepoint）的筆帆布矩形示例。
  請注意，矩形位于左上角附近。>

  繪制文本

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

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

  >

  請參閱codepen上的sitepoint（@sitepoint）的筆帆布文本示例。

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

  >

  在哪里可以了解更多？

  >

  如果您想在這里學習，有一些資源：

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

  >

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

  >

  結論

  就是這樣。我希望此介紹性的HTML5 Canvas教程為您提供了一個很好的起點，可以繼續(xù)學習和探索這項強大的技術。

  關于HTML5畫布

  的常見問題（常見問題解答）

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

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

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

  >

  如何使用HTML5帆布對對象進行動畫化？第二。每個redraw稱為幀，對對象的屬性的更改是在框架之間進行的，以產(chǎn)生運動的幻覺。這通常是使用requestAnimationFrame（）方法進行的。

  >我可以與在帆布上繪制的對象進行交互？

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

  >

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

  >

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

  >

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