html5Canvas实现画未闭合的途径及渐变色的添补办法-

这篇文章主要介绍了对于html5Canvas实现画未闭合的途径及渐变色的添补办法，有着一定的参照 价值，此刻分享给大家，有需要的伴侣可以参照 一下 这篇文章主要介绍了对于html5 Canvas实现画未闭合的途径及渐变色的添补办法，有着一定的参照 价值，此刻分享给大家，有需要的伴侣可以参照 一下

个别画图的方式有两种，即添补和描边，前面的文章已经讲了描边的办法stroke，本文就讲一下Canvas中添补图形的办法 个别画图的方式有两种，即添补和描边，前面的文章已经讲了描边的办法stroke，本文就讲一下Canvas中添补图形的办法。
添补即fill(),很直白吧？并且和strokeStyle表示描边样式同样，fillStyle即表示添补样式。
ctx.fillStyle = '色彩';默许的添补样式是不透亮的玄色
发问：未闭合的途径可以添补吗？
可以。Canvas会从你目前途径的终点直接连贯到起点，然后添补。如图：

var linear = ctx.createLinearGradient(100,100,200,100); 
linear.addColorStop(0,'#fff'); 
linear.addColorStop(0.5,'#f0f'); 
linear.addColorStop(1,'#333');

这里用了3个addColorStop，即为渐变条加上了3个色彩。
注意：addColorStop的位置参数，永远是介于0-1之间的数字,可以是两位小数，表示百分比。他无法接收’3px’这样的参数。
这时候，我们就可以添补渐变色了，但我们必需先把定义好的渐变赋给fillStyle.

var linear = ctx.createLinearGradient(100,100,200,100); 
linear.addColorStop(0,'#fff'); 
linear.addColorStop(0.5,'#f0f'); 
linear.addColorStop(1,'#333'); 
ctx.fillStyle = linear; //把渐变赋给添补样式 
ctx.fillRect(100,100,100,100); 
ctx.stroke();

linear.addColorStop(0.99,'#333'); 
linear.addColorStop(1,'rgba(51,51,51,0)');

遵照前面的规划，我再建一个歪斜的线性渐变试试。只需要改createLinearGradient的参数即可.

var linear = ctx.createLinearGradient(100,100,200,200);

结果如图：

var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圆心坐标 
radial.addColorStop(0,'#fff'); 
radial.addColorStop(0.5,'#ff0'); 
radial.addColorStop(0.9,'#555'); 
radial.addColorStop(1,'#f00');

以上就是html5 Canvas实现画未闭合的途径及渐变色的添补办法的细致内容，更多请关注 百分百源码网 其它相干文章！