注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。
从这次开始，开始着手WebGL的处理。首先是WebGL的初始化，完成渲染前的所有准备。
前面的文章也给过HTML的雏形，还记得吧，像下面的代码这样。
<html>
<head>
<title>WebGL TEST</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>这一次，从这个代码开始说明，这个HTML代码，纯粹只是在页面上放置一个canvas，从这个canvas中获取context，然后进行WebGL的初期化。刚才的代码，在head标签中引用了外部js文件script.js，那么来看一下这个文件中的代码。首先，通过getElementById来取得canvas。
var c = document.getElementById(‘canvas‘);这样，c就表示canvas对象，接下来定义canvas的大小。
c.width = 500; c.height = 300;这样就把canvas的大小设置成了宽500px，高300px了。当然，这个canvas的大小可以根据你的需求自由的设定。我这里是随便设置的，没有什么特别的意思。
var gl = c.getContext(‘webgl‘) || c.getContext(‘experimental-webgl‘);如果浏览器支持的话，这个时候gl就是你获取到的WebGL的context，接下来就通过gl来操作WebGL。
WebGL的context和之前的context（开始WebGL之前，先了解一下canvas）一样，都是包含了绘图相关的各种各样的处理的对象，里面有非常多的函数，常量和属性。
在这些函数里，有一个是用来清除画面的，函数名叫做clear，其实看名字就知道了吧......
这个函数将画面清空，回到一个全新的状态。参数是要清空的对象，或者是WebGL中定义的常量。这一次，只是清空一下画面上的颜色，所以使用COLOR_BUFFER_BIT这个常量，这个常量是为了使用canvas里面指定的颜色来清空画面而定义的。
gl.clear(gl.COLOR_BUFFER_BIT);如果要清空画面所使用的颜色的话，就必须得另外定义了。这个函数是clearColor。clearColor函数的参数有四个，就是单纯的RGBA，很直观吧，使用方法如下。
gl.clearColor(0.0, 0.0, 0.0, 1.0);像上面这样，clear方法执行的时候，就会使用黑色将画面初期化。参数的数值的指定范围是0 ～ 1之间，注意不可以像普通的HTML中那样使用16进制的颜色。
onload = function(){
// canvasエレメントを取得
var c = document.getElementById(‘canvas‘);
c.width = 500;
c.height = 300;
// webglコンテキストを取得
var gl = c.getContext(‘webgl‘) || c.getContext(‘experimental-webgl‘);
// canvasを黒でクリア(初期化)する
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
};点击下面的连接，可以看一下实际的demo。这个例子，只是纯粹的获取一下WebGL的context，然后使用黑色将canvas清空一下而已，所以画面只是一片黑色。但是如果画面可以运行出来的话，WebGL的准备工作就算基本完成了。
这一次，只是获取一下WebGL的context，然后将使用黑色将画面清空一下。但是事实上，这样就可以开始使用WebGL了。
接下来，会更具体更详细的介绍WebGL相关的处理，但不管做什么，基础都是很重要的，这次的内容还是需要彻底理解一下的。
下次，介绍一下着色器相关的基础知识。
转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend
[WebGL入门]七，context的初始化,布布扣,bubuko.com
原文：http://blog.csdn.net/lufy_legend/article/details/38342673