三、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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容