大家好，我是前端西瓜哥。今天我们来学变换矩阵。

线性变换

矩阵乘法是来自线性代数的内容。

首先我们有一个二维的向量 (x, y)，它在线性代数中，我们会这么表示：

大家好，我是前端西瓜哥。

在上篇文章我们讨论了使用 脏矩形渲染，通过重渲染局部的图形来提优化 Canvas 的性能，将 GPU 密集转换为 CPU  密集。

看这篇文章

《Canvas 性能优化：脏矩形渲染》

CPU 密集在哪？

在需要遍历 所有的图形，判断它们是否和脏矩形发生相交（碰撞），保存发生碰抓给你的图形，将它们在局部进行重绘。

有没有办法减少需要遍历的图形，不要遍历全部的图形，而是少量的图形呢？有一个办法是使用 四叉树。

大家好，我是前端西瓜哥。

使用 Canvas 做图形编辑器时，我们需要自己维护自己的图形树，来保存图形的信息，并定义元素之间的关系。

我们改变画布中的某个图形，去更新画布，最简单的是清空画布，然后根据图形树将所有图形再绘制一遍，这在图形较少的情况下是没什么问题的。但如果图形数量很多，那绘制起来可能就出现卡顿了。

那么，有没有什么办法来优化一下？有，脏矩形渲染。

大家好，我是前端西瓜哥。

今天谈谈贝塞尔曲线是什么以及它的原理，并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线。

简单记录一个计算机图形学方面的算法。即计算 2D 平面中，从点 A 到点 B 形成的向量的夹角。这算是游戏里面比较底层的算法，一般游戏引擎都会包装好这个方法，如 GMS2 的 point_direction 方法。常用于实现旋转一个物体，比如拨动时钟的指针、人物的武器使用鼠标瞄准敌人。本文代码使用 JavaScript 实现。