WebGL - HTML5畫布概述

為了在網頁上建立圖形應用程式，HTML-5提供了一套豐富的功能，例如2D畫布、WebGL、SVG、3D CSS轉換和SMIL。要編寫WebGL應用程式，我們使用HTML-5現有的畫布元素。本章概述了HTML-5 2D畫布元素。

HTML5畫布

HTML-5 的<canvas>提供了一個簡單而強大的選項，可以使用JavaScript繪製圖形。它可以用來繪製圖表、製作照片組合或進行簡單的（以及不太簡單的）動畫。

這是一個簡單的<canvas>元素，它只有兩個特定屬性width和height，以及所有核心HTML-5屬性，如id、name和class。

語法

HTML畫布標籤的語法如下所示。您必須在雙引號 (“ ”) 內提及畫布的名稱。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

畫布屬性

畫布標籤具有三個屬性，即id、width和height。

Id − Id表示文件物件模型(DOM)中畫布元素的識別符號。
Width − Width表示畫布的寬度。
Height − Height表示畫布的高度。

這些屬性決定了畫布的大小。如果程式設計師沒有在畫布標籤下指定它們，那麼像Firefox、Chrome和Web Kit這樣的瀏覽器預設情況下會提供大小為300×150的畫布元素。

示例 - 建立畫布

以下程式碼展示瞭如何建立一個畫布。我們使用了CSS來為畫布提供一個彩色的邊框。

線上演示

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

執行上述程式碼後，將產生以下輸出：

渲染上下文

<canvas>最初是空白的。要在畫布元素上顯示某些內容，我們必須使用指令碼語言。這種指令碼語言應該訪問渲染上下文並在其上繪製。

畫布元素有一個名為getContext()的DOM方法，用於獲取渲染上下文及其繪圖函式。此方法接受一個引數，即上下文型別2d。

以下程式碼用於獲取所需的上下文。您可以將此指令碼寫入body標籤內，如下所示。

線上演示

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

執行上述程式碼後，將產生以下輸出：

有關HTML-5 2D畫布的更多示例，請檢視以下連結 HTML-5畫布.

WebGL上下文

HTML5畫布也用於編寫WebGL應用程式。要在畫布元素上建立WebGL渲染上下文，應將字串experimental-webgl（而不是2d）傳遞給canvas.getContext()方法。一些瀏覽器僅支援'webgl'。

線上演示

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

執行上述程式碼後，將產生以下輸出：

列印頁面