【初识HTML5】(2) : 绘画的原理

在《画布》一文中，我们已经初步认识了HTML5 的canvas, 今天我们就要来聊聊如何画画了。在画画之前，我们必须要先认识一个东东：The Coordinate System 坐标系统：如下图所示：

相信大家还记得我们之前提到过绘画平面的默认大小是300px*150px吗？恩，相信大家对坐标轴不会陌生，这里大家要注意，坐标的位置不会固定，因为你可以通过Translate, Rotate, Scale,  custom transformations 来改变画布内坐标的位置。这个暂且不表。那么HTML5到底是怎么来画图形的呢？确切来说，浏览器执行的顺序是什么呢？

  1.  根据目前的绘画参数，在一个无限大的，透明的位图上画图形。

   2.  根据目前阴影参数，在第二个位图上画阴影。

   3.  计算阴影和画布全局的Alpha通道。

   4.  将阴影合成到画布的实际选区。

   5.  计算图像和画布全局的Alpha通道。

   6.  将图像合成到画布的实际选区。

 （2-4只有在有阴影的情况下被执行）

可能大家不是很理解其中的原理，不要急，我们后面一起画点东东你就知道了~