webgl入门到成仙【入门-02CSS颜色转webgl颜色】

最新推荐文章于 2022-12-19 12:32:13 发布

2024路在何方

最新推荐文章于 2022-12-19 12:32:13 发布

阅读量475

点赞数

文章标签： webgl 颜色 regbaStr rgba css颜色转webgl颜色

版权归作者所有，如需转载，请联系作者

本文链接：https://blog.csdn.net/qq_17175013/article/details/114273640

版权

webgl从入门到成仙专栏收录该内容

4 篇文章 0 订阅

订阅专栏

02CSS颜色转webgl颜色

知识点

css的颜色rgba值的范围是：
- 前面三个参数是颜色为0_{255，第四个参数是透明度为0}1
2. webgl的颜色rgba值的范围是：
- 前面三个参数是颜色，第四个参数是透明度，四个参数均为0~1
3. css的颜色rgba转webgl颜色rgba的方法：
- 先将css的rgba用正则获取出四个参数
- 然后将三个颜色除以255，透明度不用变

   			// css颜色
               const rgbaCss = 'rgba(255,100,0,1)';
               // 正则获取颜色值
               const reg = RegExp(/\((.*)\)/);
               // 捕捉数据
               const rgbaStr = reg.exec(rgbaCss)[1];// 返回"255, 0, 0, 1"
               // 获得css颜色数字
               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];

代码

<!--
 * @Author: 俞华
 * @Date: 2021-02-28 23:06:22
 * @LastEditors: 俞华
 * @LastEditTime: 2021-02-28 23:57:24
 * @CSDN_BLOG: https://blog.csdn.net/qq_17175013
 * @wechat: 809742006
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-刷底色</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        #canvas{
            background-color: red;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        /*
            1. css的颜色rgba值的范围是：
                - 前面三个参数是颜色为0~255，第四个参数是透明度为0~1
            2. webgl的颜色rgba值的范围是：
                - 前面三个参数是颜色，第四个参数是透明度，四个参数均为0~1
            3. css的颜色rgba转webgl颜色rgba的方法：
                - 先将css的rgba用正则获取出四个参数
                - 然后将三个颜色除以255，透明度不用变
            ```js
                // css颜色
                const rgbaCss = 'rgba(255,100,0,1)';
                // 正则获取颜色值
                const reg = RegExp(/\((.*)\)/);
                // 捕捉数据
                const rgbaStr = reg.exec(rgbaCss)[1];// 返回"255, 0, 0, 1"
                // 获得css颜色数字
                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];
            ```
            
        */
        const canvas = document.querySelector("#canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // 三维画笔
        const gl = canvas.getContext("webgl");
        // 声明颜色
        gl.clearColor(0, 0, 0, 1); // 这边clearColor(0, 0, 0, 1)的四个参数都是0到1，0对应颜色范围的0，1对应颜色范围的255
        // 刷笔色
        gl.clear(gl.COLOR_BUFFER_BIT); // gl.COLOR_BUFFER_BIT颜色缓冲区，后面会讲
        // 上面需要声明颜色和刷笔色合起来，才能有颜色


        // css颜色
        const rgbaCss = 'rgba(255,100,0,1)';
        // 正则获取颜色值
        const reg = RegExp(/\((.*)\)/);
        // 捕捉数据
        const rgbaStr = reg.exec(rgbaCss)[1];// 返回"255, 0, 0, 1"
        // 获得css颜色数字
        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);
    </script>
</body>
</html>

2024路在何方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webgl入门到成仙【入门-02CSS颜色转webgl颜色】

02CSS颜色转webgl颜色知识点css的颜色rgba值的范围是：- 前面三个参数是颜色为0255，第四个参数是透明度为012. webgl的颜色rgba值的范围是：- 前面三个参数是颜色，第四个参数是透明度，四个参数均为0~13. css的颜色rgba转webgl颜色rgba的方法：- 先将css的rgba用正则获取出四个参数- 然后将三个颜色除以255，透明度不用变 // css颜色 const rgbaCss = 'rgba(255,10
复制链接

扫一扫