鍍金池/ 教程/ HTML/ Html5 Canvas介紹
WebGL Context上下文
WebGL圖形管線
WebGL示例程序
WebGL交互式立方體
WebGL繪制三角形
WebGL幾何體
WebGL繪制模型
WebGL基礎
WebGL平移
WebGL教程
WebGL繪圖的模式
WebGL縮放
WebGL繪制點
WebGL顏色
WebGL旋轉
WebGL繪制四邊形
WebGL著色器程序
WebGL基本圖形概念
WebGL立方體旋轉
WebGL關聯(lián)屬性和緩沖區(qū)對象
Html5 Canvas介紹
WebGL著色器

Html5 Canvas介紹

要在網絡上創(chuàng)建的圖形應用程序，HTML-5提供了一套豐富的功能，如2D畫布，WebGL，SVG，CSS3D變換和SMIL。要編寫WebGL的應用程序，我們可以使用HTML-5現(xiàn)有的canvas元素。本章提供了HTML-52D canvas元素的概述。

HTML5 Canvas

HTML-5<canvas>提供了一個簡單而強大的選項來使用 JavaScript 繪制圖形。它可以用來繪制圖形，使照片組合，或做簡單的(和不那么簡單的)動畫。
這是一個簡單的<canvas>元素只有兩個特定的屬性：width和height，以及所有HTML5元素有核心的屬特，例如像：id，name和class。

語法

HTML畫布<canvas>標記的語法如下所示。要提到這些在雙引號(“”)畫布的名稱。
<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Canvas 屬性

canvas 標簽有三個屬性，即：id, width 和 height。

  • Id − ID代表在文檔對象模型(DOM)canvas元素的標識符。

  • Width − 表示canvas的寬度。

  • Height − 表示canvas的高度。

這些屬性決定 canvas 的大小。如果程序員不指定<canvas>標簽的大小，那么瀏覽器如Firefox，Chrome瀏覽器和Web工具包，默認情況下為canvas元素提供尺寸為300×150。

示例 - 創(chuàng)建一個Canvas

下面的代碼演示了如何創(chuàng)建一個畫布(canvas)。我們用CSS來將一個彩色邊框添加到畫布上。
<html>
   <head>
	
      <style>
         #mycanvas{border:1px solid red;}
      </style>
		
   </head>
	
   <body>
      <canvas id = "mycanvas" width = "300" height = "200"></canvas>
   </body>
	
</html>
這將產生以下結果 -

HTML Context (渲染)

<canvas>最初為空。要canvas元素上顯示東西，必須使用的腳本語言。這個腳本語言應該訪問渲染上下文，并且繪制就可以了。
canvas元素有一個DOM方法是 getContext()，它被用來獲取呈現(xiàn)上下文和它的繪圖功能。這個方法有一個參數，上下文 2D 類型。
下面的代碼將被寫入，以獲得必要的上下文?？梢詫⒋四_本寫在body標簽內，如下圖所示。
<!DOCTYPE HTML>

<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "300"></canvas>
      
      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Yiibai Tutorial', 100, 100);
      </script>
      
   </body>
</html>

這將產生以下結果 -

WebGL Context

HTML5畫布(Canvas)也用于寫WebGL的應用程序。要創(chuàng)建canvas元素使用WebGL來渲染，應該可傳遞 experimental-webgl，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>

這將產生以下結果 -