canvas之二绘图绘图详解曲线，文字，高级应用

１．曲线的绘制

　　(1)cxt.arc(x,y,r,angs,ange,anticlockwise)

       (2)cxt.arcTo(x1,y1,x2,y2,radius)  //默认上次的终点为x0,y0;之后0,1,2三个点定两条辅助线，根据radius进行绘制

２．贝塞尔曲线

　　(1)cxt.moveTo(x0,y0)

       (2)quadraticCurveTo(x1,y1,x2,y2)   //贝塞尔二次曲线，1是控制点

　　　bezierCurveTo(x1,y1,x2,y2,x3,y3)  //贝塞尔三次曲线，１，２是控制点

３．文字渲染

　　(1)cxt.fillText(string,xs,ys,[maxlen])

           cxt.strokeText(string,xs,ys,[maxlen])

       (2)cxt.font= style variant weight size family　　//默认是20px san-series

           font-style:normal(default)  italic oblique

           font-variant:normal small-caps

           font-weight:normal lighter bold bolder 100-900

           font-size:20px 2em 50% (small等)

　　　font_family:

　　(3)文本对齐

　　　cxt.textAlign=left center right　//水平对齐

           cxt.textBaseline=top middle bottom  //垂直对齐

　　(4)文本度量

　　　cxt.measureText(string).width //测量一个字符串的宽度

４．高级应用

　　(1)阴影

　　　cxt.shadowColor

           cxt.shadowOffsetX

           cxt.shadowOffsetY

           cxt.shadowBlur   //模糊程度

　　(2)global

           cxt.globalAlpha=1(default)  //透明度

           cxt.globalCompositeOperation="source-over"(Default)

                                                                destination-over

           //共有11中属性

       (3)剪辑区域

　　　cxt.clip()

       (4)路径方向和剪纸效果

　　　fill()效果根据的是射线零原则，注意方向　

　　(5)clearRect(x,y,w,h)　　　//一定区域清空操作

　　　isPointInPath(x,y)