当前位置：首页 > article >正文

webgl入门

article 2024/11/18 15:32:55

webgl入门

gl.clearColor需要和gl.clear提到的函数搭配使用

gl.clearColor(r,g,b,a)指定清空的颜色，接收四个参数（取值区间为0.0~1.0）
gl.clear()清空canvas 参数分为三项
1)gl.COLOR_BUFFER_BIT 清空颜色缓存
2)gl.DEPTH_BUFFER_BIT 清空深度缓存区
3)gl.STENCIL_BUFFER_BIT 清空模板缓存区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>webgl</title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400">
			此浏览器不支持canvas
		</canvas>
	</body>
</html>

<script type="text/javascript">
	const ctx = document.getElementById('canvas');
	const gl=ctx.getContext('webgl');
	
	//gl.clearColor需要和gl.clear提到的函数搭配使用
	/* 
	 *gl.clear()清空canvas 参数分为三项  
	 * 1)gl.COLOR_BUFFER_BIT 清空颜色缓存
	 * 2)gl.DEPTH_BUFFER_BIT 清空深度缓存区
	 * 3)gl.STENCIL_BUFFER_BIT 清空模板缓存区	 
	 */
	
	// gl.clearColor(r,g,b,a)指定清空<canvas>的颜色，接收四个参数（取值区间为0.0~1.0）
	// red 1.0   green 0.0   blue 0.0   alpha 1.0 颜色是红色,透明度是100%
	
	
	// gl.clearDepth(1.0)
	// gl.clear(gl.DEPTH_BUFFER_BIT)
	
	// gl.clearStencil(1.0)
	// gl.clear(gl.STENCIL_BUFFER_BIT)
	
	gl.clearColor(1.0,0.0,0.0,1.0)	
	gl.clear(gl.COLOR_BUFFER_BIT)
</script>