数据可视化

🙉 尽管 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 的前景图可以从视觉上覆盖画布中其他元素。前景图的使用方式和前景色差不多，但要考虑的情况会比前景色多一丢丢~

🎨用 fabric.js 创建画布时，fabric.js 会在 canvas 元素外包一层 div 容器。 如果想方便设置容器样式或者想通过 js 控制该容器，可以先给容器一个类名

🧣 fabric.js 在出厂时就提供了几个基础图形，比如矩形、圆形、三角形等。 但这些图形可能不能满足日常开发，我们可能还需要一些自定义的图形。

🍟当两个元素有部分重叠时，选中底层元素后，想通过被盖住的部分移动元素，该如何实现？实 Fabric.js 已经提供了相应的 API 去完成上面的需求了

🐸 使用 fabric.js 创建出来的画布默认是不能拖拽移动的，不过我们可以利用一些小技巧让画布具有被拖拽的能力。

😼在 fabric.js 里要想实现拖拽画布等效果，可以使用变换视窗的方式去实现，fabric.js 提供了 viewportTransform 方法可以完成这个需求。

🎈 使用 fabric.js 创建的图形，默认的缩放原点是元素操作点的对角点。如果想将默认缩放操作设置为“中心缩放”，只需将 centeredScaling 属性设置为 true 即可。