html5Canvas实现画未闭合的路径及渐变色的填充方法

一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法 一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。
填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。
ctx.fillStyle = &＃39;颜色&＃39;;默认的填充样式是不透明的黑色
提问：未闭合的路径可以填充吗？
可以。Canvas会从你当前路径的终点直接连接到起点，然后填充。如图：

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

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

var linear = ctx.createLinearGradient(100,100,200,100); 
linear.addColorStop(0,&＃39;#fff&＃39;); 
linear.addColorStop(0.5,&＃39;#f0f&＃39;); 
linear.addColorStop(1,&＃39;#333&＃39;); 
ctx.fillStyle = linear; //把渐变赋给填充样式 
ctx.fillRect(100,100,100,100); 
ctx.stroke();

linear.addColorStop(0.99,&＃39;#333&＃39;); 
linear.addColorStop(1,&＃39;rgba(51,51,51,0)&＃39;);

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

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

效果如图：

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

以上就是html5 Canvas实现画未闭合的路径及渐变色的填充方法的详细内容，更多请关注其它相关文章！