Wang的专栏

4 ）LINE_LOOP 闭合线条。3 ）LINE_STRIP 线条。2 ）WebGL 绘制多点步骤。2.2 获取webgl 上下文。1 ）顶点着色器移除顶点的配置。1 ） WebGL 缓冲区。2 ）LINES 单独线段。2.1 建立着色器源文件。2 ）js中更改绘制方式。2.3 初始化着色器。2.4 设置顶点点位。

js中的矩阵库

矩阵缩放的数学原理和应用

矩阵平移的数学原理和应用

因为a、b、x、y都是实数，所以其结果也是实数上图中，矩阵m乘以向量v 会得到两个结果，即和这两个结果会构成一个新的向量v’(x’,y’)这时我们可以将其和数学里的旋转公式做一下比较点A(ax,ay)围绕z轴旋β度,其旋转后的位置是点B(bx,by)，则：对比上面的两组公式，试想一下向量v是可以当成一个点位那我现在就让向量v代表的位置，就是点A的位置。那么矩阵m乘以向量v，是不是可以让向量v代表的这个点位旋转β度呢？如果可以，那么矩阵里的元素应该满足什么条件呢？满足以下条件即可这

/ 注意这里声明了浮点型，一点要用浮点数，否则会导致 UseProgram: program not valid 的警告。也可以从a_Position中抽离出由x、y、z组成的三维向量，对其进行一次性缩放。可以对gl_Position 的x、y、z依次缩放。// 注意 w 的值，默认1.0。

我们将顶点着色器里的正弦值和余弦值暴露给js，便可以用js旋转图形了。radians(float degree) 将角度转弧度。sin(float angle) 正弦。cos(float angle) 余弦。在js 中修改uniform 变量。// 修改uniform 变量。可以直接在着色器里写旋转公式。// 获取Uniform变量。

基于对初始的这个a_Position 点位进行一个位移的话，那我可以直接让它加上一个四维的向量，就比如这里的这个translation，就是我声明的一个个四四维向量，让它直接加上即可。对图形的平移啊，就是对图形所有顶点的平移。//为uniform 变量赋值。//获取uniform 变量。// 这里参考之前博文代码。

图形转面的原理与实现

遍历 lb 中的所有顶点数据，忽略绘图时随鼠标移动的点，获取鼠标和顶点的像素距离，若此距离小于10像素，返回此点；场景：鼠标点击画布，绘制多边形路径，鼠标右击，取消绘制，鼠标再次点击，绘制新的多边形。建立两个顶点数据o1,o2，如果鼠标点击了其它顶点，o1的数据就是此顶点的数据。hoverPoint() 检测所有顶点的鼠标划入，返回顶点数据。如果鼠标点击了其它顶点，就让多边形的最后一个顶点数据为此顶点。建立下一个顶点的顶点数据，添加新的顶点，建立新的时间轨。基于鼠标是否划上顶点，设置鼠标的视觉状态。

1 ） 使用 三角带 TRIANGLE_STRIP 绘制矩形。2 ） 使用 三角带 TRIANGLE_FAN 绘制矩形。1 ）封装一个Poly 对象，用于绘制多边形。可以根据自己的需求，绘制各种各样的图形。3 ）使用独立三角形，绘制矩形。基于此，设计顶点关键数据。

用请求动画帧驱动动画，连续更新数据，渲染视图。渲染方法如下，参考之前博客代码。1 ）框架层面的设计。

/ 这里的 utils.js 参考之前博文，不做重复阐述。2 ）在js中获取片元着色器暴露出的uniform变量。// 在 js 中 获取 attribute 变量。1 ）在片元着色器脚本中定义相关代码。3 ）修改uniform 变量。// 解决坐标原点位置的差异。// 存储顶点数据的数组。// 声明颜色 rgba。// 解决坐标基底的差异。// 这里修改尺寸大小。// 解决y方向的差异。// 获取着色器文本。

/ 设置attribute 变量。//修改attribute 变量。// 声明颜色 rgba。// 存储顶点数据的数组。// 获取着色器文本。

/ 设置attribute 变量。//解决坐标原点位置的差异。// 声明颜色 rgba。// 解决y 方向的差异。// 解决坐标基底的差异。// 获取着色器文本。

关于 gl.getAttribLocation。关于 attribute。

/ 功能：解析着色器文本，整合到程序对象里，关联webgl上下文对象，实现两种语言的相互通信。// 获取着色器文本，这里就是上述我们写的GLSL ES语言着色器代码。// 设置点位, 注意webgl坐标系中的单位。// 绘制顶点 以点来画。工具脚本 util.js。

设置画布底色，从样式中解析颜色并设置画布底色，设置动态画布底色