webgl 2.清屏
2017-08-24 本文已影响104人
lesliefang
所有 code 已在 Chrome 最新版中测试通过
源码请查看 https://github.com/lesliebeijing/webgl-tutorial
代码基于 WebGL1.0 即 OpenGL ES 2.0
clear.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>clear</title>
</head>
<body>
<canvas id="canvas" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script>
var canvas = document.getElementById("canvas");
var gl = canvas.getContext('webgl');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
</html>
webgl 也是绘制在 canvas 中的
- canvas.getContext('webgl')
得到 webgl 绘制的 context, 通过 context 对象调用 API
- gl.clearColor(0.0, 0.0, 0.0, 1.0)
设置 clear color , RGBA 格式，取值范围 0-1
- gl.clear(gl.COLOR_BUFFER_BIT)
用之前设置的 clear color 来填充 color buffer。
buffer 其实就是一块内存空间，color buffer 中的内容会显示在 canvas 中。
底层除了 color buffer 还有 depth(深度) buffer 、stencil(模板) buffer。分别通过 gl.COLOR_BUFFER_BIT、gl.DEPTH_BUFFER_BIT、gl.STENCIL_BUFFER_BIT 来标识。可通过 或 (|) 来指定多个 buffer。
