canvas 源码解读

虽然平时很少关注性能方面的优化，但是在 cavnas 中是 hin 容易写出卡顿、甚至崩溃的代码的，所以讲一下大体思路还是很有必要的。当然天下乌鸦一般黑，道理都是一样的🥳。

话说 canvas 中的动画效果是如何实现的，又是如何保证在不同的电脑上达到同样的动画效果呢，快来一探究竟吧！

为了让整个画布稍微生动一些，我们将尝试增加一个图片类，如果你以后需要扩展一个物体类，也是用同样的方法。

转眼这个 fabric.js 的系列教程也已经过半啦，一路走来也感谢 b 站小伙伴和掘金小伙伴们的点赞和支持，哈哈 🥳。

虽然这两个月基金涨的还行，但是离回本还有一大大大段距离😂。今天我们要实现的是 canvas 中物体的框选功能和 Group 类。

在 canvas 中我们如何处理物体的 hover 和 click 事件呢？其实本质就是如何判断点是否在一个多边形内部？你可能听过一些方法，但不知道实际开发时是怎么应用上的。

在和画布产生交互之前，我们还要做一件事情，就是让物体支持边框和控制点的绘制，亦即物体被选中时的状态，其本质就是画一个规规矩矩的矩形。

这个章节我们就要开始绘制物体了，不过在绘制之前我们需要抽象出一些物体的共性，方便后续的维护和扩展。但是每个物体都是各画各的，能有啥共性呢？

从这个章节开始我们就步入正题了，那一开始要做啥子呢，显然画布是一切物体的开端🚀，所以首先要搞定的就是它。

最近想系统看下 canvas 这个东西，所以找了一个库看看，本来打算写一两篇文章沉淀一下，发现东西有点多😦，索性就拆成了系列文章。

春风又绿基金池，明月何时把钱还！大家好，最近我在看一些关于图形学的东西，写了个一笔画手势识别的小 demo，如果你是初次看过肯定会觉得很有意思，哈哈，我也是这样的。话不多说，动手开撸！

（基金一样的绿，离离原上谱）这两天把 html2canvas 这玩意抽丝剥茧了一下，搞了个勉强能跑的小 demo，麻雀虽小五脏俱全，来看看实现的效果吧。

模糊在 canvas 中应该算是个经典问题了，相信大家也曾经看过很多相关文章，但总是记不住，为此我画了几张高清图来加深理解。

想用 canvas 来练练手？不如画个函数曲线吧，也是个适合写在简历上的项目呢 😋。支持平移、缩放、动态绘制哦！