Webgl刷底色

2023-10-27

1.在html中建立canvas 画布
 

<canvas id="canvas"></canvas>

2.在js中获取canvas画布
 

const canvas=document.getElementById('canvas’);

3.使用canvas 获取webgl 绘图上下文

const gl=canvas.getContext('webgl’);

4.指定将要用来清空绘图区的颜色

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

5.使用之前指定的颜色,清空绘图区

gl.clear(gl.COLOR_BUFFER_BIT);

代码

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const gl=canvas.getContext('webgl');
    gl.clearColor(1,1,1,1);
    gl.clear(gl.COLOR_BUFFER_BIT);
</script>

clearColor(r,g,b,a) 中的参数是红、绿、蓝、透明度,其定义域是[0,1]

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Webgl刷底色 的相关文章

随机推荐

  • pytorch中model.train和model.eval

    model eval 因为自定义的网络以及自定义的网络中的各个层都继承于nn Module这个父类nn Module存在一个training的属性 默认为True 所以 model eval 使得自定义的网络以及自定义的网络中的各个层的tr
  • 嵌入式GUI盘点-你了解几款?

    图形用户界面 Graphical User Interface 简称 GUI 又称图形用户接口 是指采用图形方式显示的计算机操作用户界面 GUI一般需要MCU有一定的硬件资源和处理能力 现在MCU资源越来越多 同时市场需求也增多了 GUI功
  • PostgreSQl 语言篇

    PostgreSQl SQL语言 概念 pgsql是关系型数据库管理系统 关系本质上是表的数学表达 表是行的集合 同一个表中每行都有相同的列 每个列都是一个特定的数据类型 每列都有固定的顺序 但是无序的 表被分组存放到数据库 由单个pgsq
  • 敏捷软件测试常见的七个误区【你确定都知道】

    敏捷软件测试常见的七个误区 敏捷软件开发是从1990年代开始逐渐引起广泛关注的一种新型软件开发方法 是能够应对快速变化的需求的一种软件开发能力 它作为一种新型的开发模式 被越来越多地应用到软件项目中 敏捷软件测试指的是在敏捷软件开发过程中跟
  • 记录一次u-rate不生效的问题

    今天在写一个小程序项目的时候 使用u rate评分组件时 一直不显示 在测试uView是否正常引入 以及各个的引入是否有错外 在全部排查了之后 任何没有找到解决方案 于是我在想会不会是u rate组件中的某个属性导致了渲染失败 于是我在查看
  • ⚡文件工具类⚡

    目录 文件工具类的介绍 文件工具类的功能简介 stat接口 获取文件的大小 判断文件是否存在 获取文件最后一次进入时间 获取文件最后一次修改时间 获取文件名 获取文件的内容 往文件中写入内容 获取目录下所有文件的相对路径 压缩文件 解压文件
  • 深拷贝与浅拷贝【JavaScript基础面试题】

    浅拷贝 对象的浅拷贝 Object assign 使用 Object assign 该函数会拷贝assign 的第二个参数 比如下例中 我们会拷贝第二个参数 也就是obj1 const obj1 a 1 b 2 const obj2 Obj
  • Verilog 条件语句if else

    注意 只能在initial或always过程块语句中使用 生成latch 在时序逻辑中 不完整的 if else 结构并不会生成锁存器 而组合逻辑中不完整的 if else 结构就会生成锁存器 所以时序逻辑可以没有最后的else 默认保持
  • qt creator解决win10下显示界面过大的问题

    最终解决方法 https blog csdn net qq 43373204 article details 117166794 这种方法只能当时生效一次 https www jianshu com p 0368e5705c51
  • 鼠标移动效果

  • CSS中position属性( absolute

    本文为CSDN博主 夜之子 的原创文章 原文链接 https blog csdn net chen zw article details 8741365 我们先来看看CSS3 Api中对position属性的相关定义 static 无特殊定
  • Ubuntu的Linux下warning: implicit declaration of function ‘fork’ [-Wimplicit-function-declaration]解决方案

    一 问题描述 要编译运行的文件 include
  • C语言实现协程(一)

    目录 基本原理 协程管理 协程实现 引言 在使用socket编程时 我们会用到accept connect recv send等函数 这些函数在没有数据到达时 会阻塞等待IO数据的到达 这不利于我们处理多个连接并快速响应 一种方案是 服务端
  • 如何使用磁碟通(UltraISO)制作启动盘

    安装 1 双击运行安装程序 选择我接受协议 下一步 2 选择安装位置 点击下一步 3 点击下一步 4 点击安装等待即可 5 安装完毕后勾选立即运行 6 点击继续使用 进入界面即完成安装 使用 1 选择文件点击打开 找到自己已下载的镜像文件
  • 推挽输出和开漏输出的比较

    一 推挽输出 推挽输出的最大特点是可以真正能真正的输出高电平和低电平 在两种电平下都具有驱动能力 推挽输出的结构是由两个三极管或者MOS管受到互补信号的控制 两个管子始终保持一个处于截止 另一个处于导通的状态 电路工作时 两只对称的开关管每
  • How to Reduce Ground Bounce: Mitigating Noise with PCB Design Best Practices

    原文链接 https www allaboutcircuits com technical articles how to reduce ground bounce mitigating noise pcb design best prac
  • nginx报错

    一 nginx emerg server directive is not allowed here in usr local nginx conf nginx conf 45 一般这个报错 都是nginx conf配置文件修改的时候出错
  • LaTeX Error: File `citesort.sty' not found.

    在使用latex写论文时居然发现了所示的错误 然后网上一顿大找解决办法 最后发现是没有citesort sty这个包 然后又到网上下载了这个包 然后就直接放到latex的安装目录下面去了 发现还是不行 真是 最后直接把下载好的这个包放到当前
  • 多台服务器之间如何实现自动化的数据同步传输?

    企业的分支机构越来越多 跨区域跨国的集团越来越多 和外部合作伙伴之间的协作越来越多 跨组织跨地域之间的协作 都依赖于数据的交互 而这些数据大部分都是存储在服务器节点上的 所以 服务器之间的文件的自动化 高可靠同步调度 就尤为重要 目前来看
  • Webgl刷底色

    1 在html中建立canvas 画布