上一篇介紹了如何在<canvas>標簽中繪制2d圖形；接下來，我們看看如何在<canvas>中使用WebGL來繪制3d圖形。
我們開始編寫一個最短的WebGL程序：Hello WebGL;這個程序的功能非常簡單，使用指定顏色清空<canvas>標簽的繪圖區；下圖顯示了程序運行的效果，清空（用黑色）了<canvas>定義的矩形區域。
我們來看下代碼，先看一下Hello WebGL.html：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Generator" content="EditPlus®">
6 <meta name="Author" content="Mirror">
7 <meta name="Keywords" content="">
8 <meta name="Description" content="">
9 <title>Document</title>
10 <!--《WebGL編程指南》的作者為讀者編寫的WebGL輔助函數-->
11 <script src="lib/webgl-utils.js"></script>
12 <script src="lib/webgl-debug.js"></script>
13 <script src="lib/cuon-utils.js"></script>
14 <script>
15 function main() { 16 //獲取<canvas>標簽。
17 var canvas = document.getElementById("myCanvas"); 18 //獲取WebGL繪圖上下文。
19 var gl = getWebGLContext(canvas); 20 //如果瀏覽器不支持WebGL則提示錯誤。
21 if (!gl) { 22 console.log("Failed to get the rendering context for WebGL."); 23 return; 24 } 25 //指定清除顏色緩沖區的顏色。
26 gl.clearColor(0,0,0,1); 27 //用指定的顏色清除顏色緩沖區。
28 gl.clear(gl.COLOR_BUFFER_BIT); 29 } 30 </script>
31 </head>
32 <body onload="main()">
33 <!--定義<canvas>標簽，通過width屬性和height屬性規定它是一片400×400的繪制區域-->
34 <canvas id="myCanvas" width="400" height="400">
35 <!--當瀏覽器不支持時，會直接忽略<canvas>標簽，而直接顯示下面這一行提示-->
36 Please use the browser supporting "canvas". 37 </canvas>
38 </body>
39 </html>
文件結構很簡單：首先使用<canvas>元素定義繪圖區域；然后指定當頁面加載完成時，調用main()函數。
在main()函數中，我們通過id找到<canvas>標簽；直到這一步，我們發現，跟繪制2d圖形的步驟是一模一樣的。但是下一句，獲取繪圖上下文，好像有點不一樣了；在繪制2d圖形的時候，我們是通過調用canvas的getContext方法，傳入“2d”參數來獲取2d圖形的回繪圖上下文的；這里需要解釋一下，通常來說，我們應該使用canvas.getContext()函數來獲取繪圖上下文（就像之前那樣）。但是在獲取WebGL繪圖上下文時，canvas.getContext()函數接收的參數，在不同瀏覽器中會不同（雖然大部分瀏覽器都接收字符串“expeimental-webgl”或“webgl”，但並非所有瀏覽器都這樣），所以我們使用getWebGLContext(canvas)來隱藏不同瀏覽器之間的差異。getWebGLContext(canvas, opt_debug)函數位於cuon-utils.js文件中。在代碼里，通過<script>標簽引入了3個js文件，這3個js文件是《WebGL編程指南》的作者寫的，里面包含了一些對WebGL編程有用的輔助函數；
getWebGLContext(canvas, opt_debug)函數的功能是：獲取WebGL繪圖上下文；如果開啟了debug屬性，遇到錯誤時將在控制台顯示錯誤消息。以下是該函數的具體說明：
在獲取到繪圖上下文以后，我們就可以繪制圖形了，並且可以繪制3d圖形了；這也說明，WebGL已經調用成功，我們現在可以使用WebGL函數了。我們將上下文放到名為gl的變量中。有了這個上下文，我們就可以設置顏色來清除<canvas>標簽指定的繪圖區了。在之前繪制2d圖形時，我們在繪制之前就指定了繪圖顏色。在WebGL中，是相似的，清空繪圖區之前也需要指定顏色。gl.clearColor(RGBA)函數通過傳入RGBA格式的顏色參數指定顏色。我們在代碼中指定了黑色，也可以隨意指定其他顏色。在繪制2d圖形時，RGBA每個分量的取值范圍是0-255之間；但是在WebGL中，每個分量的取值范圍是0-1，這和OpenGL保持了一致。一旦指定了顏色，這個顏色就會駐存在WebGL系統中，直到你重新指定新的顏色。在這之前，你可以無數次的使用該顏色進行清除繪圖區而無須重新指定。
清除繪圖區我們使用 gl.clear(gl.COLOR_BUFFER_BIT)函數；你可能覺得很奇怪，參數不應該是表示繪圖區的<canvas>嗎？這是由於gl.Clear()函數繼承自OpenGL，它基於多基本緩沖區模型，比二維繪圖上下文要復雜得多。清空繪圖區，實際上是在清空顏色緩沖區（通過指定的顏色去擦除已經繪制的內容），傳遞gl.COLOR_BUFFER_BIT參數就是在告訴WebGL清空顏色緩沖區。如果在使用該函數之前我們沒有指定任何顏色，那么默認會以RGBA(0,0,0,0)作為清除顏色，這個顏色是全透明的，替換出來的結果就是什么顏色都沒有，顯示為瀏覽器本身的顏色。
這一章我們介紹了如何建立一個WebGL程序以及使用一些簡單的WebGL相關函數，下一章我們介紹如何使用WebGL繪制基本圖形。