WebGL - 清空 canvas 绘图区域(颜色缓存区)

最新推荐文章于 2024-10-22 22:19:38 发布

翻译最新推荐文章于 2024-10-22 22:19:38 发布 · 4.2k 阅读

webgl 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了WebGL中如何操作canvas的坐标系统和清空绘图区域。首先，讲解了canvas的像素坐标系统和创建512像素宽高的canvas。接着，获取WebGL绘图上下文对象，用于绘制三维图形。然后，通过gl.clearColor()方法设定清空区域的背景颜色，并使用gl.clear()方法清除canvas上的内容。最后，提供了一个示例地址供参考。

1、canvas 的坐标系统

在这里插入图片描述

canvas坐标系统横轴是x轴，纵轴是y轴，原点是在左上角，绘图区域是指定的width和height单位是像素

注意：绘制三维图形的单位也是像素

2、创建一个宽高512的canvas

<canvas id="webgl" width="512" height="512"></canvas>

3、获取 webgl 绘图上下文对象

var canvas = document.getElementById('webgl')；

// 获取 WebGL 上下文对象
var gl = getwebGLContext(canvas)；

上面获取webgl上下文对象的方法，是为了浏览器的兼容性处理，经过封装后( 具体代码获取方法查看第一篇文章 )，你也可以直接通过下面的代码来获取webgl上下文对象

var gl = canvas.getContext('webgl');

这种方法，和获取2d绘图上下文对象类似，传递的参数不一样

var ctx - canvas.getContext('2d')；

ctx上下文对象只能绘制二维图像，而这里的gl上下文对象可以绘制三维图形，你可以console.log(gl)看该对象上面挂载的属性和方法

4、gl.clearColor()方法指定颜色

这个方法挂载在刚才获取的 gl对象上(或者对象的原型上)，清空绘图区域之前需要指定背景颜色，就像使用2d绘制矩形的时候，需要指定绘制的颜色一样

清空绘图区域也就是指定canvas的背景色

方法名	返回值	参数
gl.clearColor(r, g, b, a)	无	(r,g,b,a)是颜色值和透明度，范围是(0.0 - 1.0)，超出范围泽截断为最值

注意：一旦指定了背景色之后，背景色就会贮存在 webgl系统中，在下一次调用 gl.clearColor()前不会改变，若要用同一个颜色再次清空以下绘图区域，泽没必要再次指定以下背景色

5、清空 canvas

使用gl.clear()方法，来用刚才指定的颜色，清空绘图区域（清空颜色缓冲区），也就是用背景色填充，擦出已经绘制的内容。

gl.clear()方法

将指定缓冲区设置为预设的值，如果清空的是颜色缓冲区，那么需要使用gl.clearColor()来指定预定的颜色值

方法名	参数	返回值
gl.clear(buffer)	gl.COLOR_BUFFER_BIT(颜色缓存)、gl.DEFTH_BUFFER_BIT（深度缓冲区）、gl.STENCIL_BUFFER_BIT（模板缓冲区）	无

注意：如果没有指定颜色，也就是没有调用gl.clearColor()，泽颜色缓存区使用默认的值，(0.0, 0.0, 0.0 ,0.0)

具体三个缓存区默认值如下

名称	默认值	方法名
颜色缓存区	(0.0, 0.0, 0.0, 0.0)	gl.clearColor(r, g, b, a)
深度缓冲区	1.0	gl.clearDepth(depth)
模板缓冲区	0	gl.clearStencil(s)

具体示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Clear canvas</title>
    <link rel="stylesheet" href="../css/common.css">
</head>

<body>
    <canvas id="webgl" width="512" height="512"></canvas>
</body>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script>

    (function () {

        var canvas = document.getElementById('webgl');

        /* 获取 WebGL上下问对象*/
        var gl = getWebGLContext(canvas);

        if (!gl) {
            console.log('获取webgl上下文对象失败');
        }

        // var gl2 = canvas.getContext('webgl');

        // console.log(gl);
        // console.log(gl2);

        /* 指定清空canvas 的颜色 */
        gl.clearColor(0.0, 0.5, 0.5, 1.0);

        /* 清空 canvas 绘图区域*/
        gl.clear(gl.COLOR_BUFFER_BIT);

    })();


</script>

</html>