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

推荐阅读更多精彩内容