webgl入门到成仙【入门-01刷底色的基本步骤】

最新推荐文章于 2023-08-12 10:29:31 发布

2024路在何方

最新推荐文章于 2023-08-12 10:29:31 发布

阅读量326

点赞数

文章标签： canvas webgl three.js getContext clearColor

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

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

版权

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

4 篇文章 0 订阅

订阅专栏

01刷底色的基本步骤

知识点

css刷底色跟webgl刷底色有本质区别：
css刷底色是无法做webgl运算的
设置canvas属性，不要再css设置，要设置在canvas的DOM上
二维画笔

const gl = canvas.getContext(“2d”);

三维画笔

const gl = canvas.getContext(“webgl”);

清除画布，并给画布声明颜色，但是不是涂上底色，涂上还需要加一步gl.clear(gl.COLOR_BUFFER_BIT);
- 这里的clearColor(0, 0, 0, 1)的四个参数都是0到1，0对应颜色范围的0，1对应颜色范围的255

gl.clearColor(0, 0, 0, 1);

刷笔色
- gl.COLOR_BUFFER_BIT颜色缓冲区，后面会讲

gl.clear(gl.COLOR_BUFFER_BIT);

== 7.注意: ==

让画布具备颜色有两个步骤：第一是声明颜色gl.clearColor(0, 0, 0, 1)，第二是刷笔色 gl.clear(gl.COLOR_BUFFER_BIT)

代码

<!--
 * @Author: 俞华
 * @Date: 2021-02-28 23:06:22
 * @LastEditors: 俞华
 * @LastEditTime: 2021-02-28 23:52:54
 * @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刷底色跟webgl刷底色有本质区别：
                css刷底色是无法做webgl运算的
            2. 设置canvas属性，不要再css设置，要设置在canvas的DOM上

            3. 二维画笔
            > const gl = canvas.getContext("2d");
            4. 三维画笔
            > const gl = canvas.getContext("webgl");
            5. 清除画布，并给画布声明颜色，但是不是涂上底色，涂上还需要加一步gl.clear(gl.COLOR_BUFFER_BIT);
                - 这里的clearColor(0, 0, 0, 1)的四个参数都是0到1，0对应颜色范围的0，1对应颜色范围的255
            > gl.clearColor(0, 0, 0, 1);
            6. 刷笔色
                - gl.COLOR_BUFFER_BIT颜色缓冲区，后面会讲
            > gl.clear(gl.COLOR_BUFFER_BIT);
            == 注意: == 让画布具备颜色有两个步骤：第一是 声明颜色gl.clearColor(0, 0, 0, 1)，第二是 刷笔色 gl.clear(gl.COLOR_BUFFER_BIT)
        */
        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颜色缓冲区，后面会讲
        // 上面需要声明颜色和刷笔色合起来，才能有颜色
    </script>
</body>
</html>

2024路在何方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webgl入门到成仙【入门-01刷底色的基本步骤】

01刷底色的基本步骤知识点css刷底色跟webgl刷底色有本质区别：css刷底色是无法做webgl运算的设置canvas属性，不要再css设置，要设置在canvas的DOM上二维画笔const gl = canvas.getContext(“2d”);三维画笔const gl = canvas.getContext(“webgl”);清除画布，并给画布声明颜色，但是不是涂上底色，涂上还需要加一步gl.clear(gl.COLOR_BUFFER_BIT);这
复制链接

扫一扫