给一个元素绘制底色,我们一般使用 css 进行设置,其实我们也可以使用 webgl 对底色进行绘制.绘制步骤如下
- 获取 webgl 对象
获取 webgl 对象只要使用的context 方法
const gl = canvas.getContext('webgl')
- 设置颜色
把颜色放到一个容器中
gl.clearColor(0.6,0,0,1)
- 绘制颜色
把颜色放到容器中之后,然后把他渲染出来
//固定写法
gl.clear(gl.COLOR_BUFFER_BIT)
- 完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#canvas {
/* width: 100px; */
/* height: 100px; */
/* background: red; */
}
</style>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const gl = canvas.getContext('webgl')
gl.clearColor(0.6,0,0,1)
gl.clear(gl.COLOR_BUFFER_BIT)
const rgbCss = 'rgb(255,100,0,1)'
</script>
</html>
网友评论