- 博客(138)
- 资源 (3)
- 收藏
- 关注
原创 专注于移动端互动页面的2Dcanvas框架--canvasWF(更新中)
目录目的优缺点优势缺点地址框架的使用资源注册器 GameSpiritTextDOTweenButtoncanvas的创建css对canvas的设置目的这个框架的目的是为了,让前端的开发者能够在保证包体尽可能小的情况下,让前端的开发人员快速的开发完成canvas的相关需求。下面给玩家提供一些在互动页面常常使用到的关...
2020-01-26 23:52:53 2507
原创 webpack常用的插件集合
第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它;第一,直接使用cdn的方式的方式就不在写了,就是在index中下面通过script的方式引用 我们要使用的是下面的插件。要说明的是urlScript 这个是我们自己定义的,你可以叫任何的名字,在传入的时候使用这个变量放入插件的内置中。
2019-07-23 20:53:00 5010 5
原创 react中的useCallback、useMemo、useRef 和 useContext
上一个文章中我们讲述了useState 和 useEffect 这两个最为核心的 Hooks 的用法。理解了它们,基本上就掌握了 React 函数组件的开发思路。在 React 函数组件中,每一次 UI 的变化,都是通过重新执行整个函数来完成的,这和传统的 Class 组件有很大区别:函数组件中并没有一个直接的方式在多次渲染之间维持一个状态。在第 2 节课中你已经知道了,React 组件之间的状态传递只有一种方式,那就是通过 props。这就意味着这种传递关系只能在父子组件之间进行。
2024-08-23 09:44:40 816
原创 react 中的useState useEffect
下面的这些hook使我们常用的一些useStateuseCallback、useMemo、useRef 和 useContex下面我将讲解什么时候使用是最好的首先我们需要明确的一点是,这些hook都是在做缓存。
2024-08-23 08:57:17 492
原创 关于gltf模型格式文件的学习
因为笔者自己在检测自己学习webgl的质量于是写一个webgl的小框架。遇见了gltf模型的加载问题。所以我会一边学习一边完善这篇文章。
2024-01-18 13:55:41 1288
原创 webGL编程指南 第五章 MultiTexture.html
上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。
2023-11-09 16:54:00 546
原创 webGL编程指南 第五章 TexturedQuad_Clamp_Mirror
上一章节中我们学习了如何使用varyting变量绘制图片,本章节,我们学习texParameteri的使用。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。git代码地址 :空。
2023-11-01 16:34:59 329
原创 webGL编程指南 第五章 TexturedQuad
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。中我们使用了varying传递,数据,这次我们绘制一张图片。我会持续更新关于wegl的编程指南中的代码。git代码地址 :空。
2023-11-01 15:37:08 216
原创 webGL编程指南 第五章 MultiAttributeColorjs.js
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。本案例中我们将学习新的varying。次变量可以对顶点进行赋值。上一章节中只要使用了同一个buffer传递,位置与点的大小。我会持续更新关于wegl的编程指南中的代码。
2023-10-30 16:57:57 136
原创 webGL编程指南 第五章 MultiAttributeSize_interleaved.js
中我们使用的是2个buffer,向着色器中传递数据,本章节中我们学习使用一个buffer传递数据。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。
2023-10-30 09:46:54 91
原创 webGL编程指南 第五章 MultiAttributeSize
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。本章节中我我们学习使用buffer传递数据。
2023-10-27 15:58:13 281
原创 webGL编程指南 第四章 平移+旋转.RotatdTanslatedTriangle.html
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。移结合起来,因为矩阵的不存在交换法则。文章中设计的矩阵地址在。
2023-10-24 15:44:34 310
原创 webGL编程指南 第四章 旋转+平移.TanslatedRotatdTriangle
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。移结合起来,因为矩阵的不存在交换法则。文章中设计的矩阵地址在。我将先学习先旋转再位移。
2023-10-24 15:38:13 249
原创 webGL编程指南 第三章 矩阵缩放三角形.sclaTriangle_Matrix
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。中 我们使用矩阵进行旋转,这次我们使用矩阵实现位移。我会持续更新关于wegl的编程指南中的代码。
2023-10-19 21:27:21 59
原创 webGL编程指南 第三章 矩阵平移三角形.translatedTriangle_Matrix
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。中 我们使用矩阵进行旋转,这次我们使用矩阵实现位移。我会持续更新关于wegl的编程指南中的代码。
2023-10-19 21:17:54 490
原创 webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。
2023-10-19 20:52:21 453
原创 webGL编程指南 第三章 旋转三角形RotatedTriangle.js
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。本案例是三角形的旋转。
2023-10-18 21:52:29 251
原创 webGL编程指南 第三章 平移三角形 TranslatedTriangle.js
在本次的案例案例中主要是xy的坐标变量相加,同时传递个给相关变量。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。
2023-10-18 21:13:05 321
原创 webGL编程指南 第三章 绘制四角形.helloQuadjs(加餐)
本节中我们还是使用4个顶点,放在一个数组中。然后去获取缓冲区中的数据,同时绘制矩形。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。在绘制的时候我们给它添加上颜色。接着做使用缓冲区赋值。
2023-10-11 17:10:26 181
原创 webGL编程指南 第三章 绘制四角形.helloQuadjs
本节中我们还是使用4个顶点,放在一个数组中。然后去获取缓冲区中的数据,同时绘制正方形。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。接着做使用缓冲区赋值。
2023-10-11 17:07:13 159
原创 弧形进度条,弧形百分比
需要指出的是,我们canvas的绘制是需要弧度,所以我们代码中使用角度,等待绘制的时候再砖话为弧度值。要帮助同事写一个弧度的进度条,进度条顶部有一个小圆,具体如下。
2023-10-10 17:01:24 202
原创 vxe-table中树形结构
从二级树节点开始,同时选中的只能有一个二级树节点,选中的二级树节点之下的子节点都可以被选中。需要注意的是,文中树状图传递的数据是打平的数据,设置代码是下图,而不是树状图!同事让帮忙处理1一个bug。json打平的数据结构是。上述的这一点非常重要。
2023-08-29 10:18:06 1940
原创 微信小程序:文件下载
笔者在做资源下载的时候,我们并未直接使用微信提供的下载功能,使用的是自己的下载(二进制),然后使用微信小程序本地的文件写入api,写到本地,然后调取展示资源的api展示处理啊。
2023-07-26 16:55:36 630
原创 webGL编程指南 第三章 helloTriangle.js
我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助git代码地址地址https://github.com/soGooday/webPlan/blob/main/webGL/webGl%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97/%E7%AC%AC%E4%B8%89%E7%AB%A0-%E7%BB%98%E5%88%B6%E5%92%8C%E5%8F%98%E6%8D%A2%E4%B8%89%E8%A
2022-06-01 15:49:03 234
原创 webGL编程指南 第三章 multiPoints.js
我会持续更新关于wegl的编程指南中的代码。git代码地址https://github.com/soGooday/webPlan/blob/main/webGL/webGl%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97/%E7%AC%AC%E4%B8%89%E7%AB%A0-%E7%BB%98%E5%88%B6%E5%92%8C%E5%8F%98%E6%8D%A2%E4%B8%89%E8%A7%92%E5%BD%A2/%E7%BC%93%E5%86%B2%E5%8C%BA%E.
2022-05-27 09:55:34 394
原创 webGL编程指南 第二章 coloredPoints.js
我会持续更新关于wegl的编程指南中的代码。git代码地址 sogooday当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助在上一节的代码中是使用一个固定的颜色进行绘制clickPint.js本节中我们将使用随机的颜色进行绘制点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv..
2022-05-08 11:52:45 250
原创 webGL编程指南 第二章 clickPint.js
我会持续更新关于wegl的编程指南中的代码。git代码地址:sogooday当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助上一节内容:helloPoint2.js。当前的工程师 点击页面并且用一个固定的颜色把点击的绘制出来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X.
2022-05-06 16:42:13 297
原创 webGL编程指南 第二章 helloPoint2.js
我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助当前是在上一个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
2022-05-05 17:25:05 307
原创 WebGL编程指南学习中整体的理解
在学习webgl的时候,我大概可以将代码分为3各部分写opengl es的代码 顶点着色器与片元着色器 使用webgl的api将顶点着色器与片元着色器传递给opengl es 使用js作为桥梁,调用webgl的相关api从顶点着色器与片源着色器中获取相关变量 对变量进行赋值 绘制剩下要做的就是如果围绕喆几点进行处理,当你有了一个整体的理解了,就起码有了一个度,起码不会出现自己必书写代码,不知道下面要怎么写了的情况,有思路就好很多,代码只是思维的表现...
2022-05-02 20:02:57 419
原创 webGL编程指南 第二章 helloPint.js
我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助下面是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
2022-05-02 19:49:58 456
原创 关于webl中TRIANGLES_STRIP
webgl中的三角形的绘制有三种方法分别是:TRIANGLES:每三个定点决定一个三角形例如[0 1 2][3,4,5][5,6,7] 顶点数与三角形是n:n/3的关系TRIANGLES_FAN:第0个定点是多所有三角形共享的,顶点数与三角形是n:n-2的关系(n定点数)TRIANGLES_STRIP:也n个定点形成n-2个三角形,但是要复杂一些,三角形的三个顶点索引中,如果最大的最大的索引是偶数i,组成的三角形的排列顺序是[i-2,i-1,i] i>=2定点...
2021-12-05 11:09:36 417
原创 简单个hash路由模块
Router.js脚本主要的是 将路径的名字与方法对应起来 ,这样我们就能通过路径扎到对应的方法。这个是一个简单的路由export class Router{ constructor(){ this.routes = {}; this.curUrl = ''; this.init(); } path(path, callback){ console.log(this.routes) .
2020-12-25 16:16:24 195
原创 写一个webpack中雪碧图的loader
在项目的开发中其实对于小素材的使用优化,有几种不同的方法分别是使用base64 这个的好处是直接与文本在一起,减少向服务器段请求资源的链接通信的时间。不好的是每次刷新页面,都会冲i重新下载刷新。 使用icon小图标,这个的方式也是大家采用的,但是只用于icon小图标,对于大一些的素材,来说并不能使用 使用SVG素材,优势1任意放缩 2文本独立 3较小文件 4超强显示效果svg不是所有浏览器都能支持,点击这里查看兼容性 就是雪碧图是的使用,将小的素材打包成为一张图片,然后使用图片上的素材,好..
2020-06-28 09:53:47 321
原创 js 中发布与订阅者模式
发布与订阅者模式之前在unity做游戏的时候,尝尝使用到,发布于订阅者模式。目的是为了解耦。不然代码太黏不移维护。他的本质就是做到,发布者唯一的(key),凡是订阅者多个(value)具体的实现let eventMap = new Map();class Observe { /** * 发布信息 * @param {string} key key值 * @param {...any} args key之外的所有参数 */
2020-06-11 11:22:44 172
原创 关于js es6之后的变量作用域的分析与总结
测试题关于这个标题的提问,我想使用一个代码引出var a = 1;let b = -1;if(true){ console.log('if里面:',a,b); var a = 2; let b = -2;} console.log('if后:',a,b);for (let index = 0; index < 2; index++) { ...
2020-04-28 19:18:19 324
H5的适配及其一些动画与框架.rar
2019-09-25
关于捕鱼达人中的碰撞分层与炮弹反弹后始终面向前进的方向
2017-11-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人