数据可视化

🦄本文介绍p5.js中map()函数的用法，该函数可以将一段区间映射到另一段区间，用于处理数值的转换。我结合了具体的实例讲解了如何使用map()函数，包括将鼠标位置映射到画布中的特定区域改变画布颜色

🦄 虽然 Fabric.js 提供的基础功能已经很丰富了，但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。

原生 canvas 提供了 save() 和 restore() 两个方法去管理画布状态。p5.js 作为一个 canvas 库，也理所当然的提供了状态管理的方法。

用 canvas 绘图时会根据当前状态来绘制。很多的 canvas 库都利用到这一特性。比如 p5.js 利用了 canvas 状态特性衍生出 push 和 pop 函数

不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式，但刷新画布却没更新元素样式？ 如果你也遇到同样的问题的话，可以尝试使用本文的方法。

🙉 Fabric.js 有图案画笔功能，这个功能可以简单理解成“刮刮卡”效果。 如果只是看 Fabric.js 文档可能还不太明白 图案画笔 PatternBrush 是如何使用的。

🙉 尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。

😹 逐步拆解 Fabric.js 拖拽生成元素。如何拖拽元素？如何在画布准确地找到鼠标当前坐标？如何进行坐标转换？本文都会逐一讲解～

按照 《p5.js 光速入门》 的方式在 module 模式下使用 p5.js ，如果不出意外的话肯定会有意外！

🐱使用 fabric.js 在某些情况下你可能需要固定元素边框的宽度，仔细看文档你会发现 fabric.js 已经为我们提供了这个功能。本文简单介绍一下这个功能。

💥 万事开头难，然后中间难，最后结尾难。canvas也不例外。学完vue和react之后记得回过头来看看canvas

❤️ 简单来说，p5.js 能让“切图仔”更容易做出具有艺术感的作品（很能整活）。本文会用光的速度带你入门P5.js

🦄 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交（也可以叫元素是否重叠），这个方法叫 intersectsWithObject()。

🐥 创建一个矩形，这个矩形有自己的 ID 属性，在执行序列化操作出来的结果却看不到 ID 属性了？？？

0基础学Three.js，使用原生三件套的方式快速开启学习旅程，不需要麻烦的环境搭建。一文搞懂Three核心概念~

如果你想用 canvas 画图，那不妨试试 Fabric.js 。跟着本文一步一步操作，一定可以入门 Fabric.js

Fabric.js本身并没有提供鼠标右键的事件，我查阅了文档，发现了一些小线索。于是我用相关api组合出一套右键菜单~

🪄 喷雾笔刷 SprayBrush 是 fabric.js 提供的一个很好玩的工具，而且 fabric.js 也封装好了很多非常方便的属性让我们配置，用起来非常简单的。

🦄 fabric.js 的铅笔其实是继承基础画笔的一个工具，在基础画笔的基础上多了“拐角平滑度”等配置项。 本文讲解铅笔的基础用法以及常用事件。

🎴 fabric.js 的前景图可以从视觉上覆盖画布中其他元素。前景图的使用方式和前景色差不多，但要考虑的情况会比前景色多一丢丢~