WebGL清空绘图区

前言

今天就从一个最简单的清空绘图区程序开启WebGL之路，还记得前面说的canvas标签吗？回忆一下就开始吧。

HTML

新建一个html文件，clearCanvas.html

    <canvas id="demo" width="400" heigth="400"/>

JavaScript

还记得之前绘制的矩形吗？之前是获取的canvas上下文，这次我们则需要用到WebGL上下文。

   function getWebGLContext(canvas, opt) {
       const types = ['webgl', 'experimental-webgl'];
       let context = null;
       
       // 判断浏览器是否支持WebGL
       if (!window.WebGLRenderingContext) {
           return null;
       }
       
       // 获取上下文
       types.some(type => {
           context = canvas.getContext(type, opt) || null;
           return !!context;
       })
       return context;
   }
   
   function main() {
        // 获取canvas元素
        var canvas = document.getElementById('demo');
        // 获取WebGL上下文
        var gl = getWebGLContext(canvas);
        
        if (!gl) {
            console.log('请选择支持WebGL的浏览器');

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

    main();

获取WebGL上下文

getWebGLContext(canvas)函数返回的就是WebGL绘图上下文，来看这个函数里边的封装，先定义了两种 ('webgl', 'experimental-webgl'),这两个都是获取上下文，主要针对于浏览器的兼容，所以这里才用到了这两个。

设置canvas背景色

gl.clearColor(red, green, blue, alpha)

从以上代码中可以看出，clearColor 方法以 RGBA 格式设置背景色，四个参数的取值范围为(0.0 到 1.0)。平时我们在 css 中常用到的背景色的设置 RGBA 格式的颜色分量范围为 0 到 255，因为 WebGL 遵循传统的 OpenGL 颜色分量范围， 因此其中 gl.clearColor 对应的是 OpenGL 中的 glClearColor 函数。

清空canvas

gl.clear(buffer)

将指定的缓冲区设定为预定的值。如果清除的是颜色缓冲区，那么将使用 gl.clearColor() 指定的值作为预定值。 此处参数 buffer 指定缓冲区，包括：

哈哈，下一节终于要开始画图之旅了，我们来总结一下清空绘图区的整个过程：