<!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>使用WebGL绘制一个点</title>    </head>    <body>        <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->        <canvas id="webgl" width="500" height="500"></canvas>        <script>            //通过getElementById()方法获取canvas画布            var canvas = document.getElementById('webgl');            //通过方法getContext()获取WebGL上下文            var gl = canvas.getContext('webgl');            //用来设置视口，即指定从标准设备到窗口坐标的x、y仿射变换            gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);            //用于设置清空颜色缓冲时的颜色值            gl.clearColor(125.0 / 255, 16.0 / 255, 212.0 / 255, 1.0);            //使用预设值来清空缓冲            gl.clear(gl.COLOR_BUFFER_BIT);        </script>    </body>    </html>

API

  • WebGL API 的 WebGLRenderingContext.viewport() 方法，用来设置视口，即指定从标准设备到窗口坐标的x、y仿射变换。
  • WebGL API 的 WebGLRenderingContext.clearColor() 方法用于设置清空颜色缓冲时的颜色值。
  • WebGL API 的 WebGLRenderingContext.clear() 方法使用预设值来清空缓冲。