个人博客

# 一、绘制一个三角形 ​ 之前绘制点的时候只需要一个点的数据即可，如果要绘制三角形的话，则需要三个点，这时候就需要使用缓冲区对象，向着色器传递多个点的多个数据比如坐标，颜色。 123456789101112131415161718192021222324252627282930313233343536/* 1.创建缓冲区对象*/const buffer = gl.createBuffer()// gl.deleteBuffer() 删除缓冲区对象/* 2.绑定缓冲区对象*/gl.bindBuffer(gl.AR

# 一、从绘制一个点开始 绘制一个点有以下几个步骤 获取 canvas 以及上下文。webgl 需要使用 canvas 展示。 12345<canvas id="canvas"></canvas><script> let canvas = document.getElementById(&#x27;canvas&#x27;) let gl = canvas.getContext(&#x27;webgl&#x27;)</script>

# 初识 glsl # 一、数据结构 # 1. 数据类型 ​ glsl 的值分为以下几种，无字符串类型。 int: 整型 uint: 无符号整型 float: 单精度浮点型 double: 双精度浮点型 bool: 布尔类型 glsl 的数据类型分为向量和矩阵。注意不同的向量类型只能储存对应的类型的值。比如 vec 储存浮点数比如 1.0，而不能储存其他类型，比如 1 为整型，true 为布尔型。另外如果数据如果小数位太多使用单精度浮点数储存时可能会损失精度。 # 向量： vec (2,3,4): 表示储存 (2,3,4) 个单精度浮点数的向量。 dvec (2,3,4): 表示储存 (

# 端对端连接初体验 # 一、NAT STUN TURN NAT NAT 全称 Network Addresss Translation 即网络地址转换。出现的目的是为了解决 ipv4 不够用的情况同时还能保证内网安全，缺点在于 nat 会降低网速，nat 层数越多网速越慢，同时 nat 如果两边都是对称型或者一边是对称型另一边是端口限制性，就无法进行 p2p 连接了。由于 ipv4 数量不够，不足以让每台设备都拥有一个 ipv4，同时 ipv6 还未普及。所以需要 nat 将内网 ip 转化为公网 ip 中的某个端口。一般一个路由器有一个公网 ip，同时路由器会给连接上路由器的设备一个内

# 幻影坦克 # 1. 介绍 ​ 有些图片在 qq 或者贴吧等平台上，正常情况是一张图片，但是打开放大变成了另一种图片，因为其表现形式像红色警戒的幻影坦克，因此将这类图片称作幻影坦克。其实这类图片是 png 图片，众所周知 png 图片有透明度，正是因为这个特性就可以让图片在不同背景下显示出不同图片成为可能。接下来介绍如何制作这类图片。 # 2. 图像混合 ​ 在调用 canvas 的 context 的 getImageData 方法后，会返回一个对象，其中 data 属性包含这个图片的像素颜色信息。每个像素有四个数据分别是 rgba，其中第四个数据是不透明度。这四个数据的取值范围均为 0-

# websocket 的基本使用 websocket 是全双工，可以做到客户端与服务端的实时连接，在直播，即时通讯，等要求实时传输的场景下有广泛的运用。 # 一、基本使用 # 1. 引用 12345678910111213141.前端let socket = new WebSocket(url) //注意url以ws或者wss开头，而不是http或者https,当调用这个构造函数的时候会连接一下。socket实例对象上的方法与事件:onclose:连接关闭事件onerror:连接失败事件onopen:连接成功事件onmessage:从服务器上获取数据时的事件cl

# canvas 对视频处理 # 1. 使用 canvas 动态截取视频 # 1. 截取画面 1234567891011//可以使用drawImage截取视频当前播放的这一帧画面。this.ctx.drawImage(video,0,0,width,height)//与处理图片一样可以使用getImageData获取某一帧的画面的rgba数据let data = this.ctx.getImageData(0,0,width,height)//处理后使用putImageData将某画面绘制到canvas上。this.ctx.

# canvas 对图片处理 # 1. 绘制，裁剪 12345678910111213141516171819let img = document.querySelector(&#x27;#img&#x27;)let canvas = document.querySelector(&#x27;#canvas&#x27;)let ctx = canvas.getContext(&#x27;2d&#x27;)img.onload=()=>&#123; canvas.width &#

# webrtc 基础 # 一、获取媒体流 navigator.mediaDevices 上有四个方法 getUserMedia: 获取用户摄像头的媒体流，媒体流包括视频流和音频流。 getDiaplayMedia: 获取用户的屏幕。 enumerateDevices: 返回用户设备。 getSupportedConstraints: 返回一个对象，表示可以约束的属性 123456789101112131415async function()&#123; //是一个promise，返回一个媒体流对象。 let stream = await naviga

# 二进制基础 # 一 、 原码 反码 补码 对于有符号的变量而言，首位代表符号，0 为正数，1 为负数。 原码：十进制转化为二进制 反码：负数的符号不变，其他位取反。 补码：负数的反码加一。 另外对于 8 位二进制而言，储存范围为 [-127,127],-128 无原码以及反码，但是有补码为 10000000。而 10000000 在反码以及原码中表示 0. 计算机内存储存的数据为补码，在进行减法运算的时候则是转化为加法计算，比如 1-1 转化为 1+（-1），将 1 与 - 1 的补码相加然后转为原码就是最终结果。如果加出了九位则将第一位舍弃。 相关资料： 【计算机基础】轻松学会原码、反码