前几天遇到个问题,如何实现html5 canvas中圆环的颜色渐变而此类例子,在百度上几乎没有這问题的实现在此,跟大家分享下我的思路!
刚入手htnl5 知识点掌握不深,大家勿喷!贵在交流!
在解决上述问题的前提是你能画出个圓环,最简单的是画两个半级不同的同心圆叠加在一起就可以了但是为了实现圆环的颜色渐变,如果使用同心圆来实现圆环不管是哟個线性渐变还是径向渐变都无法实现圆环的颜色渐变(个人认为,主要是经验少以为不行),原因是两者渐变都是以圆心到外层的方向漸变而圆环是以圆弧为轨迹的。在此个人采用 通过描绘扇形的方法来实现该效果!
// 再次保存以备旋转 // 移动到终点,准备连接终点与圆惢 // 从圆心连接到起点 // 还原到最初保存的状态 //扇形横坐标、纵坐标 //改变扇形颜色渐变值,此处为重点发布了2 篇原创文章 · 获赞 0 · 访问量 1万+