将css两种色值（十六进制、rgba）表达式转为webgl色值

在使用canvas绘制3d图形时我们会遇到webGl无法正确的识别常用的css色值，如十六进制色值表达式和RGBA表达式，这时候我们需要对CSS表达的色值转换为webgl可以识别的色值。使用 JavaScript 中的正则表达式来解析十六进制和RGBA颜色字符串，并使用 JavaScript 中的数学函数将其转换为 RGBa 颜色值。

以下是一个示例函数，可以将十六进制颜色字符串（例如 "#FF00FF"）或RGBA字符串转换为 RGBa 颜色值（例如 "rgba(255, 0, 255, 1)"）：

    <!-- css颜色值转webgl颜色值 -->
    // 将十六进制转为rgba值
    function hexToRgba(hex){
        // 首先使用正则表达式将十六进制字符串分解为 RGB 分量
        let result;
        if (hex.length === 4) {
            result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex);
            // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串
            let r = parseInt(result[1] + result[1], 16);
            let g = parseInt(result[2] + result[2], 16);
            let b = parseInt(result[3] + result[3], 16);
            return  "rgba(" + r + ", " + g + ", " + b + ", 1)";
        } else {
            result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            // 将分解出的分量转换为十进制数
            let r = parseInt(result[1], 16);
            let g = parseInt(result[2], 16);
            let b = parseInt(result[3], 16);
            return "rgba(" + r + ", " + g + ", " + b + ", 1)"；
        }
    }
    // 将rgba值转为webGl色值
    function rgbaToWebGL(rgba) {
        // Split the RGBA string into its component parts
        const parts = rgba.match(/\d+/g);
        // Extract the values for each component (red, green, blue, alpha)
        const r = parseInt(parts[0], 10) / 255.0;
        const g = parseInt(parts[1], 10) / 255.0;
        const b = parseInt(parts[2], 10) / 255.0;
        const a = parseInt(parts[3], 10);
        // Return the WebGL color value
        return {r,g,b,a};
    }

    // 将css两种色值（十六进制、rgba）表达式转为webgl色值
    function cssToWebgl(cssColor){
        const hexadecimalRegex1 =  /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        const hexadecimalRegex2 =  /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
        const rgbaRegex = /rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d\.?\d*)\)/;
        // 如果是十六进制那么转为rgb
        if(hexadecimalRegex1.test(cssColor)||hexadecimalRegex2.test(cssColor)){
            const hexadecimalToRgba = hexToRgba(cssColor) // 十六进制那么转为rgba
            return rgbaToWebGL(hexadecimalToRgba) // 再将rgba值转为webGl色值
        }else if(rgbaRegex.test(cssColor)){
            return rgbaToWebGL(cssColor)
        }else{
            alert('请输入正确的十六进制、rgba表达式：（#f0f|#ff00ff|rgba(255,0,255,0.4)）')
        }
    }
    // 1.获取canvas画布
    const canvas = document.querySelector("#canvas")
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // 2. 获取webgl上下文
    // 选择3D画笔
    const gl = canvas.getContext('webgl')
    // 3. 清除绘图区的颜色
    // const cssColor = '#FF00FF' // 十六进制
    const cssColor = 'rgba(255, 0, 255, 1)' // rgba
    const webglColor = cssToWebgl(cssColor)
    const {r,g,b,a} = webglColor
    gl.clearColor(r,g,b,a)
    // 4.使用前
    gl.clear(gl.COLOR_BUFFER_BIT)