三、Canvas图形变换、渐变色、自定义笔刷

一、图形变换

IMG_2858.PNG

保存一个状态、恢复到上一个保存状态

IMG_2859.PNG

因为Canvas的图形变换 '不是'基于状态的，下一个变换会在上一个变换的基础上进行再变换，所以，使用save()和restore()可以还原context的变换状态，使图形重新开始变换。

IMG_2860.PNG

IMG_2864.PNG

IMG_2865.PNG

二、变换矩阵

IMG_2869.PNG

变换矩阵API：

IMG_2870.PNG

利用变换矩阵API，进行变换：

IMG_2871.PNG

IMG_2872.PNG

变换矩阵API也是在上一个变换的基础上，进行再变换的。

IMG_2873.PNG

setTransform()是清除之前所有的变换，重新进行变换的

IMG_2874.PNG

IMG_2875.PNG

变换矩阵API总结：

IMG_2876.PNG

三、定义：线性渐变色

IMG_2879.PNG

IMG_2880.PNG

IMG_2881.PNG

IMG_2882.PNG

IMG_2883.PNG

四、定义：径向渐变色（两个同心圆：圆心一样，半径不同）

IMG_2886.PNG

IMG_2887.PNG

IMG_2888.PNG

空心圆环（第一个圆的半径不为0）

IMG_2889.PNG

IMG_2890.PNG

五、自定义：图片作为笔刷

IMG_2894.PNG

IMG_2897.PNG

IMG_2898.PNG

六、自定义：Canvas作为笔刷

IMG_2899.PNG

IMG_2900.PNG

IMG_2901.PNG

IMG_2902.PNG

七、自定义：多媒体视频作为笔刷

IMG_2903.PNG

本章小结：

IMG_2904.PNG

IMG_2905.PNG

IMG_2906.PNG

fillStyle的样式，完全可以用在strokeStyle上面

IMG_2907.PNG