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

我正在参加「掘金·启航计划」 从本篇文章开始,我们将正式开启计算机图形学之旅,本系列文章将一步步深入介绍计算机在渲染输出呈现一张图片经历的各种步骤细节以及涉及到的相关其他领域的知识串...

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

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

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

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

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

我正在参加「掘金·启航计划」 本文系原创,转载请注明出处.码字不易,希望大家多多关注,多多点赞! 开新坑啦,本文是系列文章'计算机图形学'的第一篇: 线性代数概览,之所以第一篇就讲线性代数,是因...

第十三章 超级椭圆与超级方程（Superellipses and Superformulas） 原作：Keith Peters www.bit-101.com/blog/2022/1… 译者：池中物王二狗(sheldon) 源码：github: github.com/willian1234… ...

前言 学习目标 根据任意图形的变换原理，修改之前变换图案的代码，使其可以变换任意图形 知识点 矩阵变换 1-Object2D 整体代码如下： import { Vector2 } from '../math/Vector2' import { Grou...

我正在参加「掘金·启航计划」 傅里叶变换(Fourier Transform) 书接上文,我们知道在RnR^nRn空间中我们可以找到一个正交基来构成其基向量,通过之前关于向量空间的介绍我们也知道向量不仅仅是一个...

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

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

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

前言 学习目标 创建T恤图案编辑器 知识点 TransformControler 的应用 canvas 全局合成 canvas 图层控制 DOM和图形组件的数据传递 1-搭建前端静态 1-1-页面结构 T恤图案编辑器的页面结构如下图所...

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