对应《WebGL编程指南》代码：01-HelloCanvas
步骤
- 获取
<canvas>元素
- 获取webgl绘图上下文
- 设置背景色
- 清空
<canvas>
知识点
-
gl.cleanColor()的参数
-
一旦指定了背景色，背景色就会驻存在WebGL系统中，在下次调用clearColor前不会改变
-
若想显示webgl调试错误，在调用getWebGLContext时，传入第二个参数true即可开启，例:
1
| var gl = getWebGLContext(canvas, true);
|
-
gl.clear(buffer)清空背景色; 关于缓冲区，可以查看这里
实例
HelloCanvas.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Clear canvas</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use the browser supporting "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>
|
HelloCanvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function main(){
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if(!gl)
{
console.log('Failed to get the rendering context for WebGL');
return;
}
gl.clearColor(0.6, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
|
效果
注意
getWebGLContext()是《webgl编程指南》一书所编写的工具库(cuon-utils.js)中的方法，若有需要，可找博主私信即可。
Tips:
Please indicate the source and original author when reprinting or quoting this article.