<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="400" width="400">
你的浏览器不支持WebGL,请更换新的浏览器
</canvas>
</body>
<script>
function main() {
//首先获取到canvas的dom对象
var canvas = document.getElementById("canvas");
//获取到WebGL的上下文
var gl = canvas.getContext("webgl");
//不支持WebGL的浏览器将打印一个错误,并结束代码运行
if(!gl){
console.log("浏览器不支持WebGL");
return;
}
//指定一个覆盖(清空)canvas的颜色
gl.clearColor(0.0,0.0,0.0,1.0);
//执行清空
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</html>
1.clearColor(red,green,blue,alpha);指定绘图区域的背景色
这个方法就相当于css设置rgba一样,区别就是 rgba的值是0到255,而clearColor是0.0 到 1.0 必须是浮点数,就是必须要带小数点。
最后一位是透明度,0.0为全透明,1.0是没有透明度。
2.gl.clear(buffer)
将指定缓冲区设定为预定的值。如果清空的是颜色缓冲区,那么将使用gl.clearColor()指定的值(作为预定值)。
参数:
(1)buffer 指定待清空的缓冲区,位操作符OR(|)可用来指定多个缓冲区(这句话我也不怎么懂)
(2)gl.COLOR_BUFFER_BIT 指定颜色缓存
(3)gl.DEPTH_BUFFER_BIT 指定深度缓冲区
(4)gl.STENCIL_BUFFER_BIT 指定模板缓冲区
清空缓冲区的默认颜色及其相关函数
颜色缓存区 (0.0,0.0,0.0,1.0) gl.clearColor(red,green,blue,alpha);
深度缓冲区 1.0 gl.clearDepth(depth)
模板缓冲区 0 gl.clearStencil(s)