WebGL-第一个WebGL程序

3 0 0

HTML:


<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>canvas</title>
 </head>
 
 
 <body onload="main()">
 <canvas id="webgl" width="500" height="500"
style="border:1px solid #000000;">
 Please use a browser that supports "canvas"
 
 </canvas>
 <script src="../lib/webgl-utils.js"></script>
 <script src="../lib/webgl-debug.js"></script>
 <script src="../lib/cuon-utils.js"></script>
 <script src="HelloCanvas.js"></script>
 </body>
</html>

JS:


function main() {
//获取canvas元素
 var canvas = document.getElementById('webgl');
 
//获取WevGL绘图上下文
 var gl = getWebGLContext(canvas);
 
//判断时候获得画笔，不成功则报错
 if (!gl) {
 console.log('Failed to get the rendering context for WebGL');
 return;
 }
 
//指定清空颜色
 gl.clearColor(0.5, 0.2, 0.3, 1.0);
 
//清空<canvas>
 gl.clear(gl.COLOR_BUFFER_BIT);
}

'

运行