所有 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。
