<!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() 方法使用预设值来清空缓冲。
发表回复