上一篇介绍了如何在<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>
Hello WebGL.html
时间： 2024-12-14 18:43:32