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