目标 也就是需求，是在画布上可以输入文字，可以选中文字再次编辑，图形的基本变换已经实现了，现在只要可以新增文本。二次编辑即可。 方案选择， 编辑文字使用dom文本框，失焦后，文字绘制到画...

什么是PixiJS PixiJS是一个用于2D游戏和交互式应用程序开发的快速、轻量级、模块化的JavaScript库。和大多数其他的2D游戏库不同，它是用JavaScript编写的，并以WebGL作为渲染器。PixiJS允许开发...

哈喽大家好啊，我是广州小井。上一小节我们初步用矩阵实战了图形平移，但它的应用远不如此！本文，我们将继续深入矩阵，看看它是如何在复合变换中发光发热的吧～ 因为要更好的学习 WebGL 就需要...

前言 在业务中需要一种体现物体在平面图上的位置关系视图，比如IBMS中设备在楼层平面中的位置，同时可能有文字描述信息，实现这个最开始是dom加拖拽实现，但频繁操作dom太影响性能，所以使用Can...

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

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

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

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

富文本编辑器相信大家都用过，相关的开源项目也很多，虽然具体的实现不一样，但是大部分都是使用DOM实现的，但其实还有一种实现方式，那就是使用HTML5的canvas，本文会带大家使用canvas简单实现...

本文以canvas、svg原生为基础，结合fabricjs和antv框架讲解了2D图形原理。并深入分析了框架的构成原理，以及如何实现，并结合案例给出了多种实现方式。最后给出了整体架构图，方便参考。 canvas...

本文简介 点赞 + 关注 + 收藏 = 学会了 记得以前看爆笑校园里有一集讲到，一个人对着前面开了一枪，过了一阵子弹打中他自己的后脑勺。作者想通过这个冷笑话告诉大家一件事：地球是圆的。 在 Mat...

如果你不只闷头写代码，还需要方案设计、内部分享、向上汇报、述职答辩、追求晋升等等，绘图工具几乎是互联网从业者标配工具。好用的绘图工具，可以大幅提升绘图效率和图形效果，甚至能够让你的...

本次教程我们将介绍如何基于 p5.js 来绘制一朵花儿，教程将会涉及到贝塞尔曲线、颜色的操作、三角函数以及坐标系的旋转、缩放等 更多关于 p5.js 和生成艺术的教程，请查阅 beauty-of-pixel.tech...

前言 前不久，在Stack Overflow上用自己半瓢水的动画知识，帮助提问者解决了一个问题 的同时，看到很多眼生的方法，比如composed,于是顺便学习了一波自定义 Modifier。回过头来总结时，发现解决...

本文简介 点赞 + 关注 + 收藏 = 学会了 这几天在整理书柜时看到这套书，看到梵高，想起他的点彩画。 想到点彩画派，不得不提的一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他的画作。 我引...

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

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

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

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

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