Html5 Canvas介紹
要在網路上建立的圖形應用程式，HTML-5提供了一套豐富的功能，如2D畫布，WebGL，SVG，CSS3D變換和SMIL。要編寫WebGL的應用程式，我們可以使用HTML-5現有的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。
範例 - 建立一個Canvas
下面的程式碼演示了如何建立一個畫布(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()，它被用來獲取呈現上下文和它的繪圖功能。這個方法有一個引數，上下文 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的應用程式。要建立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>
這將產生以下結果 -
