对应《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.