在《画布》一文中,我们已经初步认识了HTML5 的canvas, 今天我们就要来聊聊如何画画了。在画画之前,我们必须要先认识一个东东:The Coordinate System 坐标系统:如下图所示:
相信大家还记得我们之前提到过绘画平面的默认大小是300px*150px吗?恩,相信大家对坐标轴不会陌生,这里大家要注意,坐标的位置不会固定,因为你可以通过Translate, Rotate, Scale, custom transformations 来改变画布内坐标的位置。这个暂且不表。那么HTML5到底是怎么来画图形的呢?确切来说,浏览器执行的顺序是什么呢?
1. 根据目前的绘画参数,在一个无限大的,透明的位图上画图形。
2. 根据目前阴影参数,在第二个位图上画阴影。
3. 计算阴影和画布全局的Alpha通道。
4. 将阴影合成到画布的实际选区。
5. 计算图像和画布全局的Alpha通道。
6. 将图像合成到画布的实际选区。
(2-4只有在有阴影的情况下被执行)
可能大家不是很理解其中的原理,不要急,我们后面一起画点东东你就知道了~