webgl_001_刷底色

1、在html中建立canvas画布

<canvas id='webgl'></canvas>

2、在js中获取canvas画布，并设置宽高

const canvas = document.getElementById('webgl');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

3、使用canvas获取webgl上下文

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

4、指定用来清空绘图区的颜色

gl.clearColor(0,0,0,1);

5、使用之前指定的颜色，清空绘图区

gl.clear(gl.COLOR_BUFFER_BIT);

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;overflow: hidden;}
        </style>
    </head>
    <body>
      <canvas id='webgl'></canvas>
    </body>
</html>
<script type="text/javascript">
  const canvas = document.getElementById('webgl');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const gl = canvas.getContext('webgl');
  gl.clearColor(0,0,0,1);
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>