标签：
上一篇介绍了如何在<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>
标签：
原文地址：http://www.cnblogs.com/mirror-pc/p/4181398.html
