- 博客(220)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 11、webgl 基本概念 + 球体 + 圆柱体
本文介绍了如何使用WebGL绘制3D球体。首先定义了球体的基本概念和参数计算方法，包括球半径、y坐标公式和截面圆半径公式。然后提供了一个完整的HTML+JavaScript实现代码，涉及顶点着色器和片段着色器的创建、WebGL程序的初始化、矩阵变换以及球体的绘制过程。关键函数createSqure()通过经度和纬度划分生成球体顶点数据和索引数据，draw()函数负责将数据绑定到缓冲区并渲染球体。代码还实现了简单的旋转动画效果。
2025-11-10 22:42:43
567
原创 10、webgl 基本概念 + 坐标系统 + 立方体
本文介绍了WebGL中的基础坐标系统概念及其在立方体绘制中的应用。主要内容包括： 坐标系统 模型坐标：物体在自身坐标系下的局部坐标 世界坐标：场景的全局坐标系统 观察坐标：相机视角下的坐标系统，包括正射投影和透视投影两种视图模式 裁剪坐标：可视范围内的顶点坐标 立方体绘制示例 通过WebGL API实现彩色立方体的渲染 使用矩阵变换实现立方体旋转动画 包含顶点着色器和片段着色器的完整代码实现 启用深度检测确保正确的3D渲染效果 该示例演示了WebGL中从模型坐标到屏幕坐标的完整变换流程，以及基本的3D物体渲
2025-11-09 21:50:04
677
原创 9、webgl 基本概念 + 复合变换 + 平面内容复习
本文介绍了3D变换的基本概念和实现方法，主要包括： 变换顺序：先平移后旋转，通过矩阵乘积实现坐标变换； 旋转矩阵构建：分别给出了绕Z轴、X轴和Y轴的旋转矩阵公式； 复合变换：展示了平移、旋转和缩放的组合变换实现，通过WebGL着色器程序将多个变换矩阵传入顶点着色器进行运算； 代码实现：提供了完整的HTML/JavaScript代码示例，演示了如何通过WebGL实现四边形的基本变换和动画效果。文中特别强调了复合变换时矩阵运算的顺序以及使用顶点索引缓冲区优化性能的方法。
2025-11-09 11:06:32
970
原创 8、webgl 基本概念 + 图像变换（平移 + 旋转 + 缩放）
WebGL 变换技术摘要 本文介绍了WebGL中的两种基本变换方法：平移和旋转。在平移部分，对比了常规坐标变换和向量平移两种实现方式，重点讲解了向量平移在齐次坐标系中的表示方法（X,Y,Z,W表示顶点，X,Y,Z,0表示向量）。旋转部分探讨了沿Z轴旋转的三角函数实现。文中包含具体代码示例，展示了如何通过uniform变量实现X轴平移，并分析了常规方法的局限性（需要分别处理各轴向的平移）。最后介绍了使用顶点索引缓冲区优化绘制性能的技巧，通过减少重复顶点数据提高渲染效率。
2025-11-05 21:59:17
1162
原创 7、webgl 基本概念 + 前置数学知识点（向量 + 矩阵）
本文介绍了向量和矩阵的基本概念及其运算规则。向量是既有大小又有方向的量，包括加减法和标量乘除运算，点积可用于计算光照效果。矩阵是排列成行列的元素集合，支持加减、标量乘法、矩阵乘法（需满足行列匹配条件）、转置和求逆等运算。其中矩阵乘法不满足交换律，转置是行列互换，逆矩阵需满足与原矩阵乘积为单位矩阵的条件。这些基础运算在几何变换和图形处理中具有重要作用。
2025-11-04 21:38:49
348
原创 6、webgl 基本概念 + 四边形纹理
本文摘要： WebGL纹理映射技术详解 核心概念： 片元着色器执行流程：顶点坐标→图形装配→光栅化→片元着色器处理 纹理映射本质是为几何图形"贴皮肤"，将图像映射到由三角形组成的图形上 纹理图像像素称为纹素，通过坐标映射为片元着色 关键实现步骤： 顶点着色器接收纹理坐标并传递给片元着色器 片元着色器通过sampler2D取样器获取纹素颜色 创建/配置纹理对象，设置图像加载和映射参数 激活纹理单元并绑定纹理对象 传递纹理单元编号给着色器
2025-11-03 22:24:18
353
原创 5、webgl基本概念 + 绘制多边形 + 绘制圆 + 绘制圆环
摘要：本文介绍了使用WebGL绘制圆和多边形的基本方法。通过分解圆为多个连续三角形实现，当三角形数量越多时，绘制效果越接近圆形。文章提供了计算顶点位置的数学公式（三角函数），并展示了如何通过JavaScript和WebGL API实现绘制。示例代码包含从创建着色器到生成顶点数据的完整流程，可绘制多边形（三角形数量少时）和圆形（三角形数量多时）两种图形效果。
2025-11-02 17:29:56
956
原创 4、webgl 基本概念 + 绘制四边形
摘要：文章介绍了WebGL中两种缓冲区类型(ARRAY_BUFFER和ELEMENT_ARRAY_BUFFER)的区别，以及绘制图元的相关方法。ARRAY_BUFFER需要写入所有顶点数据，而ELEMENT_ARRAY_BUFFER通过索引优化可减少重复顶点。文中详细讲解了gl.drawElements()参数和使用场景，并提供了绘制四边形的基础代码示例和优化版本。特别强调矩形绘制时顶点顺序的重要性(正面逆时针、背面顺时针)，以及如何通过索引缓冲区提升性能。最后给出了完整的HTML实现代码。
2025-11-02 16:00:00
691
原创 3、webgl 基本概念 + 绘制线段 + 绘制三角形
WebGL缓冲区对象与三角形绘制摘要 WebGL通过缓冲区对象实现高效顶点数据管理，使用gl.bufferData()将顶点数据一次性存入缓冲区，gl.vertexAttribPointer()为着色器变量分配缓冲区数据。示例代码演示了如何创建着色器程序、绑定顶点数据到缓冲区，并绘制随机颜色的三角形。关键参数包括顶点分量数(2表示xy坐标)、数据类型(FLOAT)和绘制方式(STATIC_DRAW)。最后通过gl.drawArrays()执行绘制命令，完成三角形渲染。
2025-11-02 09:30:00
1941
原创 2、webgl 基本概念 + 绘制点
WebGL是一种用于在浏览器中渲染3D/2D图形的JavaScript API。它基于OpenGL ES着色器语言，通过顶点着色器(处理顶点信息)和片元着色器(处理颜色)协同工作。WebGL只能绘制点、线段和三角形三种基本图元，使用归一化设备坐标系(-1到1)。着色器程序通过attribute(顶点相关)、uniform(全局)等变量传递数据，其中gl_Position和gl_FragColor是必须赋值的内置变量。示例代码演示了如何绘制基本点和实现鼠标点击位置绘制随机颜色点，涉及坐标转换、变量传递等核心概
2025-11-01 17:33:06
525
原创 1、webgl 的背景
WebGL是一种跨平台的免费API，用于在浏览器中渲染2D/3D图形。它通过JavaScript调用GPU硬件加速，无需插件即可实现高性能渲染。WebGL源自OpenGL ES标准，由Khronos Group开发，2011年发布1.0版本，2017年升级为2.0版本。其优势包括跨平台、高性能和易集成，但也存在学习曲线陡峭、调试困难等缺点。应用场景涵盖网页游戏、数据可视化、在线教育等领域。核心由Canvas、JavaScript和着色器组成，通过顶点/片元着色器实现图形渲染。未来可能被更高效的WebGPU替
2025-10-31 15:29:05
442
原创 7、贝塞尔曲线动画并绘制动画轨迹效果
一个小球在不停的运动，然后根据小球运动轨迹在画布上绘制轨迹。html + css 部分。js 部分（绘制动画轨迹）
2025-08-09 09:45:00
384
原创 3、环绕照片墙效果
使用 scss 语法进行书写，vscode 中使用。给 n 张图片，做环绕的效果。鼠标左右移动开始变化可视照片。// 监听鼠标事件进行左移右移。// 循环旋转图片。
2025-07-29 12:45:00
273
原创 webpack5基础（上篇）
开发模式顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事情：1、编译代码，使浏览器能够识别运行开发时我们有样式资源、字体图标、图片压缩、html资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源2、代码质量检查，树立代码规范提前检查代码的一些隐患，让代码运行时能更加健壮提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 webpack 解析样式资源。
2024-12-30 21:45:00
1254
原创 10_React router6
点击此处可以跳转 5.x版本1、react-router：路由的核心库，提供了很多的：组件、钩子2、react-router-dom：包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如等3、react-router-native： 包括 react-router 所有内容，并添加一些专门用于 ReactNative 的 API，例如等。
2024-09-25 20:45:00
1161
原创 08_React redux
3、redux 的 reducer 函数必须是一个纯函数（不能写 unshift 等方法添加数据，如果 preState 被改写 reducer 就不纯了，页面也不会更新）！3、重点：Person 的 reducer 和 Count 的 reducer 要使用 combineReducers 进行合并，合并后的总状态时一个对象！5、备注：容器给 UI 传递：状态（这里的状态是 redux 中的状态）、操作状态的方法，均通过 props 传递。
2024-09-14 22:15:00
1391
原创 07_React 路由
1、一个路由就是一个映射关系（key：value）2、key 为路径，value 可能是 function 或 component1、默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序一致）2、开启严格匹配3、严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由。
2024-09-06 21:00:00
1325
1
原创 06_React ajax
1、React 本身只关注于界面，并不包含发送 ajax 请求的代码2、前端应用需要通过 ajax 请求于后台进行交互（json 数据）3、React 应用中需要集成第三方 ajax 库（或自己封装）1、jQuery：比较重，如果需要另外引入不建议使用2、axios：轻量级，建议使用1）封装 XmlHttpRequest 对象的 ajax2）promise 风格3）可以用在浏览器端和 node 服务器端FeHelper（前端助手）：JSON 自动格式化，手动格式，支持排序、解码、下载等等“pro
2024-09-03 19:00:00
1381
原创 05_React应用（基于React脚手架）
setupTests.js ----- 应用的整体测试，单元测试，组件测试（jest-dom 支持）App.test.js ------- 用于给 APP 做测试,基本不用，直接运行看效果即可。App.css ----------- App 组件的样式。App.js ------------ App 组件。logo192.png ------ logo 图。robots.txt ------- 爬虫协议文件。index.js ---------- 入口文件。工程化: 代码编写完成以后一系列都可以自动运行。
2024-08-29 17:58:30
978
原创 04_DOM的diffing算法
{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 3, name:'小王', age: 21}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}
2024-08-25 14:56:06
764
原创 03_React 收集表单数据和 组件生命周期
2、理解：包含表单的组件分类2.1 受控组件页面中所有的输入类的节点，随着输入将数据维护到状态中，使用的时候直接从状态中取，就是受控组件受控组件的优势在于 可以减少 ref 的使用2.2 非受控组件页面中所有的输入类的节点，现用现取就是 非受控组件二、高阶函数_函数柯里化1、复习–对象相关的知识2、高阶函数如果一个函数符合下面 2 个规范中任何一个，那么该函数就是高阶函数1）若 A 函数，接收的参数是一个函数，那么 A 就可以称为高阶函数2）若 A 函数，调用的返回值依然是一个函数，
2024-08-24 16:31:18
857
原创 02_React面向组件编程--基本使用与理解、组件实例的三大核心属性与事件处理
/**_ 执行了 ReactDOM.render(, … 之后，发生了什么？_ 1.React 解析组件标签，找到了 MyComponent 组件_ 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中_/2、类的复习总结：1、类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写2、如果 A 类继承了 B 类且 A 类中写了构造器，那么 A 类构造器中 super 时必须要调用的3、类中所定义的方法，都是放在了类的
2024-08-20 21:30:00
1962
原创 01_React简介、基础入门
用于构建用户界面的 JavaScript 库界面–》 视图只关注视图层例子：使用原有的知识去展示数据的步骤1）发送请求获取数据2）处理数据（过滤、整理格式等）3）操作 DOM 呈现页面 （React 只关注这一步骤）React 是一个将数据渲染为 HTML 视图的开源 Javascript 库。
2024-08-19 20:00:00
1606
原创 06_Electron项目：实现一个类似 EditPlus 的简易记事本代码编辑器
使用 Electron Html Css Js Nodejs 实现一个类似于 EditPlus 的记事本编辑器的小小编辑器，此项目的主要目的是让大家巩固前面学的知识点以及灵活运用 Electron 中的模板。nodemon 是一个命令行工具，用来辅助项目开发。在 Nodejs 中，可以在每次修改文件后重新执行该文件。
2024-08-10 10:00:00
1597
原创 05_ Electron 自定义菜单、主进程与渲染进程通信
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
2024-08-09 21:30:00
1062
原创 04_Electron 模块介绍
官方文档： https://www.electronjs.org/zh/docs/latest/api/appremote 模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径。Electron 中，与 GUI 相关的模块（如 dialog， menu 等）只存在于主进程，而不在渲染进程中。为了能从渲染进程中使用它们，需要用 ipc 模块来给 主进程发送进程间消息。使用 remote 模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于 java 的 RMI。
2024-08-09 19:30:00
1002
原创 03_Electron 主进程和渲染进程、点击（拖放）打开文件功能
在页面运行其他脚本之前预先加载指定的脚本， 无论页面是否集成 Node，此脚本都可以访问 所有 Node API 脚本路径为文件的绝对路径。： 进程（process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配的调度的基本单位，是操作系统结构的基础。2、如果不使用 preload 加载的 js ，Electron5.x 之后没法在渲染进程中直接使用 nodejs，在主进程 中实例化 BrowserWindow 创建的 Web 页面被称为渲染进程，一个 Electron 应用。
2024-08-08 22:45:00
1737
原创 02_快速启动 Demo 创建 Electron 项目、electron-forge 搭建一个 electron 项目、手动创建electron项目
electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行、打包 electron 项目。2、在 electrondemo 目录下面新建三个文件： index.html 、main.js、package.json。Eslint 最初是由 Nicholas C.Zakas 于 2013年6月创建的开源项目。3、index.html 里面用 css 进行布局（以前怎么写现在还怎么写）1、新建一个项目目录，例如：electrondemo。创建成功后的文件夹链接，
2024-08-08 22:00:00
1016
原创 01_Electron 跨平台桌面应用开发介绍
Electron 是由 Github 开发的一个跨平台的桌面应用开发框架，可以让我们用 html、css、js 的技术开发桌面上可以安装的软件。使用传统语言开发桌面应用，开发成本高。github 的 atom 编辑器，vscode都是使用 Electron 开发的。1、公司有开发桌面应用的需求。（Electron 开发速度快、开发周期短、跨平台、维护成本低）2、前端开发者想提升自己的技能，有必要学习一下 Electron， 大家都会 Electron， 所以我们也得学。
2024-08-07 19:00:00
604
原创 13_TypeScript 装饰器
装饰器：装饰器是一种特殊类型的声明，它能够附加到类声明、方法、属性或参数上，可以修改类的行为。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。装饰器的方法：普通装饰器（无法传参）、装饰器工厂（可传参）。装饰器是过去纪念中 js 最大的成就之一，也是 ES7 的标准特性之一。
2024-07-26 21:15:00
454
原创 12_TypeScript 模块 以及 模块化封装DB 库
相反，如果想使用其它模块导出的变量、函数、类、接口 等的时候，你必须要导入它们，可以使用 import 形式之一。同 java 的包，.net 的命名空间一样，TypeScript 的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过 export 关键字进行暴露，外部使用 import 引入使用。模块里面的变量、函数、类等默认是私有的，如果我们要在外部访问模块里面的数据（变量、函数、类），暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据（变量、函数、类…
2024-07-25 20:45:00
1112
原创 11_TypeScript 类型、接口、类、泛型综合使用
要求1：Mysql 、Mongodb 、Mssql 功能一样，都有 add update delete get 方法。功能：定义一个操作数据库的库 支持 Mysql 、Mongodb 、Mssql。1、接口：在面向对象的编程中，接口是以一种规范的定义，它定义了行为和动作的规范。解决方案：需要约束规范所以要定义接口，需要代码重用所以用到泛型。2、泛型 通俗理解：泛型就是解决 类 接口 方法 的复用。注意：约束统一的规范、以及代码重用。
2024-07-24 21:00:00
511
原创 10_TypeScript中的泛型
*泛型：**软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性，组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以已自己的数据类型来使用组件。泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持})// 把类作为参数来约束Db.add(u)动态的校验 MysqlDb 类。
2024-07-24 20:00:00
457
原创 09_TypeScript 中的接口
接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，他只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。TypeScript 中的接口类似于 java ，同事还增加了更灵活的接口类型，包括属性、函数、可索引和类等。定义标准。
2024-07-17 21:49:29
481
flutter使用webrtc技术实现共享桌面，视频
2021-02-22
flutter_practies.zip
2021-01-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人