【WebGL之巅】01-使用webgl清空绘图区

By yesmore on 2021-07-24
阅读时间 1 分钟
文章共 374
阅读量

对应《WebGL编程指南》代码:01-HelloCanvas

步骤

  1. 获取<canvas>元素
  2. 获取webgl绘图上下文
  3. 设置背景色
  4. 清空<canvas>

知识点

  1. gl.cleanColor()的参数

  2. 一旦指定了背景色,背景色就会驻存在WebGL系统中,在下次调用clearColor前不会改变

  3. 若想显示webgl调试错误,在调用getWebGLContext时,传入第二个参数true即可开启,例:

    1
    var gl = getWebGLContext(canvas, true);
  4. 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
//HelloCanvas.js
function main(){
//获取<canvas>元素
var canvas = document.getElementById('webgl');

//获取WebGl绘图上下文
var gl = getWebGLContext(canvas);
if(!gl)
{
console.log('Failed to get the rendering context for WebGL');
return;
}

//指定清空<canvas>的颜色
gl.clearColor(0.6, 0.0, 0.0, 1.0);

//清空<canvas>
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.