html5 Canvas画图4：填充和渐变
html5 Canvas画图4：填充和渐变<div class="postText"><div id="cnblogs_post_body">一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。
填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。
ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色
提问：未闭合的路径可以填充吗？
可以。Canvas会从你当前路径的终点直接连接到起点，然后填充。如图：
http://img170.poco.cn/mypoco/myphoto/20121127/16/64623076201211271558113300416997653_004.jpg
但你可以发现，最后一段没有描边。
记得我们前一篇文章用4条线画了一个正方形，但canvas不会这么差劲，连直接绘制矩形的函数都没有。你可以使用fillRect()直接填充一个矩形：
ctx.fillRect(x,y,width,height);
这里的x,y是指矩形的左上角起点的坐标，记住。
说到fillRect，就不得不提strokeRect，你猜对了，他的意思就是直接描边出一个矩形。
还有fillText与strokeText，至于作用嘛，你可能都猜到了，我这里先不讲，大家先预习吧。
Canvas填充渐变色
在Canvas中，渐变色同样分为两种，即线性渐变和径向渐变，而且创建他们的方法也是独立的。我们先看如何创建线性渐变。
创建线性渐变=createLinearGradient&mdash;&mdash;看，依然很直接的单词。他的语法如下：
createLinearGradient(x1,y1,x2,y2)有4个参数呢！看起来好复杂，其实这个挺简单的，因为我们前面已经说了，平面世界里的一个点是由x坐标和y坐标确定的。所以，x1,y1就是表示线性渐变的起点坐标，x2,y2就表示终点坐标。
这样做的好处很明显，如果我们想创建一个斜着的线性渐变，很方便。但我们先创建一个水平的线性渐变试试吧。
<div class="cnblogs_code">var linear = ctx.createLinearGradient(100,100,200,100);
页:
[1]