canvas学习之路（二）特殊绘图功能及实例 （一）clip（） 从原始画布中剪切任意形状和尺寸，只有剪切部分是可见的，之后所有的绘图都被该区域。 （二）filltext（）画布文本设置功能 （三）globalCompositeOperation （四）createLinearGradient（）创建线性渐变对象 （五）createRadialGradient（）；径向渐变 （五）createPattern（）；在指定的方向上重复指定的元素。 （六）drawImage（）用于将图片添加到画布的指定的位置。
作天的canvas学习有点艰难，涉及到vedio和动画事件，知识点比较多，虽然之前有学过css和H5动画功能，但是忘得真是一干二净，乘着这个机会再复习了一下，所以总结拖到今天。
使用clip（）之后，绘制的正方形只有在被剪切区域的部分才会显示。上述代码效果如下图：
（二）filltext（）画布文本设置功能
语法：fillText（text，X，Y，maxwidth）其中第一个参数代表文本坐标，第二个第三个参数代表绘图文本开始时的坐标，maxwidth代表最大文本宽度。
设置文本格式有以下几种功能：如下图（具体解释我在代码中已给出）
代码效果如下图：
如果我们要给字体加上阴影效果，怎么办？
效果如下图6：
strokeText（）与fillText（）的差别
前者绘制的文本没有填色（暂时也没有发现可以给strokeText（）内的字体填色的功能，连线条宽度也无法通过linewidth（）设置），后者有填色。
*（这里要注意代码中ctx.save（）和ctx.restore（）的用法。可参考canvas学习之路（一））
效果如下：
（三）globalCompositeOperation
这个功能比较强大，理解起来跟数学中的差集、补集等功能差不多。 ]
具体用法可以参看w3c，上面讲得很详细，此处不再赘言。
（四）createLinearGradient（）创建线性渐变对象
语法：createLinearGradient（X0，Y0，X1，Y1）
（X0，Y0）渐变起始点，（X1，Y1）渐变结束点
createLinearGradient（）通常与addColorStop（）结合使用，后者用来表示对象的颜色和位置。
语法：addColorStop（stop，color）stop的值在0~1之间，表示位置，color则表示该位置的颜色。
效果如下：
（五）createRadialGradient（）；径向渐变
createRadialGradient(x1,y1,radius1,x2,y2,radius2)；前面三个参数表示起始圆的圆心及半径，后面三个参数表示结束圆的圆心及半径。
（五）createPattern（）；在指定的方向上重复指定的元素。
语法：createPattern（img，repeat|repeat-X|repeat-Y|no-repeat）
重复直到填满整个指定区域为止。
效果如下：
（六）drawImage（）用于将图片添加到画布的指定的位置。
- 语法一：ctx.drawImage(img,x,y,w,h)
- 语法二：ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
ctx.drawImage(img,x,y,w,h)中（x,y,w,h）同fillRect(x,y,w,h)里的四个参数含义完全一样。ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)中（dx,dy,dw,dh）的含义与语法（一）中的一样。（sx,sy,sw,sh）则是对图片的一个裁切，图片的左上角为（0,0）的点，（sx,sy）是指从图片的某个位置开始裁切，（sw,sh）则是指裁切的宽度和高度。