前言 学习目标 创建二维文字对象 知识点 ctx.fillText() ctx.strokeText() 1-文字的样式对象 首先咱们先看一下样式对象的架构思路。 最底层的是BasicStyle，再上面的StandStyle和TextStyle依次...

哈喽大家好啊，我是广州小井。上一小节我们初步接触了矩阵的数学基础，但我们还不知道学来干嘛？那这一节我们马不停蹄的来应用矩阵进行实战！ 因为要更好的学习 WebGL 就需要更多的上手敲代码，...

合集 - 实时光线追踪(3)1.实时光线追踪（3）Ray Casting06-192.实时光线追踪（2）降噪：Nvidia Real-time Denoiser2022-09-033.实时光线追踪（1）降噪：Spatio-Temporal Filtering2022-08-29收...

哈喽大家好啊，我是广州小井。上一小节我们初步接触了图形的二维变换，但每一个变换我们都是通过不同的数学公式计算顶点坐标实现的，那有没有统一的计算方式呢?不急，我们先来学点数学知识吧！ ...

前言 学习目标 创建Group对象 知识点 集合 前情回顾 之前我们创建了Img对象，接下来我们建立Group对象。 1-Group对象的功能 Group 是二维图形的集合，它可以对这些图形进行管理，比如增删改查。...

前言 学习目标 创建Scene对象 理解Scene对象的功能和运行逻辑 知识点 渲染封装 坐标转换 前情回顾 之前我们创建了Group对象，接下来我们建立Scene对象。 1-Scene对象的功能分析 Scene 对象是场...

前言 学习目标 创建相机轨道控制器 操控相机变换视图 知识点 位移 缩放 前情回顾 之前我们创建了Scene对象，接下来我们建立OrbitControler对象。 1-OrbitControler对象的功能分析 OrbitControle...

前言 学习目标 创建ImgControler对象 使用ImgControler对象变换图案 知识点 图案选择 图案控制框 鼠标状态与样式 图案变换 前情回顾 之前我们用OrbitControler 对象实现了相机的变换，接下来我...

前言 学习目标 基于某一基点变换任意图形 知识点 矩阵变换 1-基点变换的思路 此时我突然想起一句让人午夜惊醒的话：来，咱们再把这件事情的来龙去脉从头捋一遍。 我现在就想着把这个基点变换的...

前言 学习目标 创建Img对象 知识点 drawImage 矩阵 前情回顾 之前我们创建了Object2D对象，接下来我们接着往上写Img对象。 1-Img对象的功能分析 Img对象是对canvas的drawImage() 方法的封装，若...

前言 学习目标 创建相机对象 平移视口 缩放视口 知识点 二维视图投影矩阵 前情回顾 之前我们canvas的矩阵变换原理，接下来我们就可以创建图形对象了，我们先写个相机练练手。 1-相机的功能分析 ...

前言 学习目标 创建事件分发器 掌握事件分发器的运行原理 知识点 监听者模式 前情回顾 之前我们说过图案编辑器的整体架构，接下来我们会从最底层的EventDispatcher 对象开始写起。 EventDispatc...

前言 学习目标 创建二维对象 理解二维对象的基本功能 知识点 矩阵变换 前情回顾 之前我们创建了EventDispatcher 对象，接下来我们接着往上写Object2D对象。 1-Object2D对象的功能分析 我们之前...

前言 学习目标 对图案编辑器进行整体架构 认识各种常见的矩阵 知识点 图形架构 矩阵 1-架构思想 图形项目的基本架构思想是面向对象。 我在架构图形项目的时候，一般会架构两棵树，一个棵是用于...

前言 课前准备 具备前端基础，如HTML、css、js。 多多少少敲过一点vue。 具备canvas基础，若没有，可以看一下我的《canvas从入门到放飞自我-基础篇》 学习目标 以面向对象的思路架构canvas。 使...

前言 学习目标 canvas 内置变换方法里的矩阵逻辑 知识点 translate(x,y) rotate(ang) scale(x,y) transform(e0,e1,e3,e4,e6,e7) 前情回顾 之前我们完成了图案编辑器的整体架构，创建了vue+vite+...