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>