正文

css颜色转webgl颜色

譬如朝露 V管理员/ / 0 评论/ 640阅读
05 24

css的颜色rgba值的范围是：0-255

webgl的颜色rgba值的范围是：

- 前面三个参数是颜色，第四个参数是透明度，四个参数均为0~1

css的颜色rgba转webgl颜色rgba的方法：

- 先将css的rgba用正则获取出四个参数,然后再将三个参数除以255，就是webgl的颜色

<!--
 * @Author: your name
 * @Date: 2021-05-24 21:14:01
 * @LastEditTime: 2021-05-24 21:40:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \01\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0%;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    let canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //获取三维画布
    const gl = canvas.getContext('webgl');
    //声明颜色
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    const colors = 'rgba(255,0,0,1)';
    let reg = RegExp(/\((.*)\)/);
    const res = reg.exec(colors)[1];
    const arr = res.split(',').map(num => parseInt(num));
    const r = arr[0] / 255;
    const g = arr[1] / 255;
    const b = arr[2] / 255;
    const a = arr[3];
    gl.clearColor(r, g, b, a);
    gl.clear(gl.COLOR_BUFFER_BIT);
</script>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。