【绘制】HTML5 Canvas 绘制模型：canvas的浏览器渲染过程原理（详细理解和通俗理解）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

前提

既然要使用Canvas，那就必须要有个很好的理解才行。想知道如何绘制Canvas图形、图像与文本的，其实需要了解阴影、alpha通道、剪辑区域及图像合成等内容。如果你还不太了解这方面内容，可以先有个大致了解，在后期学习之后再回来看也不迟。

详细过程

在向Canvas上绘制图形或图像的时候，浏览器需要按照如下步骤进行操作：

1. 将图形或图像绘制到一个无限大的透明位图中，在绘制时遵从当前的填充模式、描边模式以及线条样式。
2. 将图形或图像的阴影绘制到另一幅位图中，在绘制时使用当前绘图环境的阴影设定。
3. 将阴影中每一个像素的alpha分量乘以绘图环境对象的globalAlpha属性值。
4. 将绘有阴影的位图与经过剪辑区域剪切过的canvas进行图像合成。在操作时使用当前的合成模式参数。
5. 将图形或图像的每一个像素颜色分量，乘以绘图环境对象的globalAlpha属性值。
6. 将绘有图形或图像的位图，合成到当前经过剪辑区域剪切过的canvas位图之上，在操作时使用当前的合成操作符（composition operator）。

只有在启动阴影效果时才会执行2-4步。

通俗理解

1. 将图按照你规定的样式或模式绘制到一张图中（不包括透明度）
2. 将阴影按照你规定的绘制样式到另一张图中（不包括透明度）
3. 设置阴影透明度
4. 将阴影区域和剪辑区域合成
5. 设置图的透明度
6. 将图和剪辑区域合成

剪辑区域（clipping region）：它是在canvs之中由路径所定义的一块区域，浏览器会将所有的绘图操作都限制在本区域进行。

默认情况下，剪辑区域的大小与canvas一致。