WebGL笔记：设置画布底色，从样式中解析颜色并设置画布底色，设置动态画布底色

1 ) 通用结构代码

<canvas id="canvas">canvas>

<script>
	// 获取dom元素
	const canvas = document.querySelector("#canvas");
	// 设置宽高
    canvas.width = 200;
    canvas.height = 200;
    // 获取gl三维画笔
    const gl = canvas.getContext("webgl");
script>
1
2
3
4
5
6
7
8
9
10
11

2 ) 设置画布底色脚本

    gl.clearColor(1, 1, 0, 1); // 设置清空颜色缓冲时的颜色值，即设置预设值，这里是黄色
    gl.clear(gl.COLOR_BUFFER_BIT); // 使用预设值来清空缓冲, 这里最终渲染出黄色
1
2

• clearColor
• clear

3 ) 从样式中解析颜色并设置画布底色脚本

const rgbaCss = "rgba(0, 255, 0, 1)"; // 获取css色值, 这里是绿色
const reg = RegExp(/\((.*)\)/); // 解析()里的内容
const rgbaStr = reg.exec(rgbaCss)[1]; // 获取匹配的数值型字符串
const rgba = rgbaStr.split(",").map((n) => parseInt(n)); // 字符串转换成数组
// 解析颜色
const r = rgba[0] / 255;
const g = rgba[1] / 255;
const b = rgba[2] / 255;
const a = rgba[3];
gl.clearColor(r, g, b, a);
gl.clear(gl.COLOR_BUFFER_BIT);
1
2
3
4
5
6
7
8
9
10
11

设置动态画布底色脚本

• 首先需要引入 three.js 的 Color 对象

  <script type="module">
    import { Color } from "https://unpkg.com/three/build/three.module.js";
    const canvas = document.querySelector("#canvas");
    canvas.width = 200;
    canvas.height = 200;
    // 获取gl三维画笔
    const gl = canvas.getContext("webgl");
    // 生成Color对象
    const color = new Color("rgba(255,0,0,1)");
    !(function animate() {
      color.offsetHSL(0.005, 0, 0);
      const { r, g, b, a } = color;
      gl.clearColor(r, g, b, a);
      gl.clear(gl.COLOR_BUFFER_BIT);
      requestAnimationFrame(animate);
    })();
  script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• Color
• offsetHSL
• requestAnimationFrame