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>

2 ) 设置画布底色脚本

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

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);

设置动态画布底色脚本

首先需要引入 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>