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

webgl入门

news 2025/7/10 17:16:21

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>