HTML5帆布教程：簡介

鑰匙要點

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

什麼是html5 canvas？

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

html5畫布有什麼好處？

>

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

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

遊戲。 HTML5畫布的功能集是生產各種2D和3D遊戲的理想候選人。

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

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

  畫布渲染上下文

  每個HTML5畫布元素都必須具有a上下文。上下文定義了您將使用的HTML5帆布API。 2D上下文用於繪製2D圖形和操縱位圖圖像。 3D上下文用於3D圖形創建和操縱。後者實際上稱為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頁面的底部包含在內：

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

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

  >

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

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

  >

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

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

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

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

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

  了解帆布坐標系

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

  >基本畫布示例 如前所述，HTML5畫布讓您創建多種類型的對象，包括線，曲線，路徑，形狀，文本等。在示例中，您可以看到其中的某些對象實際上是如何繪製的。我不會在帆布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簡單繪圖很容易，但是創建複雜的形狀和動畫需要一些數學和物理知識。關於該主題的最好的書之一是帶有JavaScript的Foundation HTML5動畫。這本書是學習將事物從簡單到復雜的動畫移動的絕佳資源。

  >

  在哪裡可以了解更多？

  >

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

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

  >

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

  >

  結論

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

  關於HTML5畫布

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

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

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

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

  >

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

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

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

  >

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

  >

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

  >

以上是HTML5帆布教程：簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！