HTML 5 绘图
185
一.绘制几何图形
CanvasRenderingContext2D 只提供了两个方法来绘制几何图形。
fillRect(foat x, float y, float width, float height)：填充一个矩形区域。
strokeRect(foat x, float y, float width, float height)：绘制一个矩形边框。也就是说CanvasRenderingContext2D 只提供了绘制矩形的方法，并没有直接提供绘制其他几何形状（如圆形、椭圆、
三角形）的方法。
二.绘制字符串
CanvasRenderingContext2D 为绘制文字提供了如下两个方法。
fillText(String text, float x, float y , [float maxWidth])：填充字符串。
＞
stroke Text(String text, float x, float y , [fIoat maxWidth])：绘制字符串边框。
为了设置绘制字符串时所用的字体、字体对齐方式，CanvasRenderingContext2D 还提供了如下两个属性。
textAlign：设置绘制字符串的水平对齐方式，该属性支持 start. end、left、right.center 等属性值。
textBaseAlign：设置绘制字符串的垂直对齐方式，该属性支持 top、hanging 、middle、alphabetic、idecgraphic、 bottom 等属性值。
三.设置阴影
CanvasRenderingContext2D 为设置图形阴影提供了如下属性。
shadowBlur：设置阴影的模糊度。该属性值是一个浮点数，该数值越大，阴影的模糊程度就越大。
shadowColor：设置阴影的颜色。
shadcv:Offsetx：设置阴影在X方向的偏移。
shadowOffsetY：设置阴影在 Y方向的偏移。
四.使用路径
正如前面提到的，CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法，并没有直接提供绘制圆形、椭圆等几何图形的方法。为了在 Canvas 上绘制更复杂的图形，必须在Canvas 上启用路径，借助于路径米绘制图形。
在 Canvas 上使用路径，可按如下步骤进行。
(1）调用 CanvasRenderingContext2D 对象的 beginPath( )方法开始定义路径。
(2）调用 CanvasRenderingContext2D 的各种方法添加子路径。
(3）调用 CanvasRenderingContext2D 的 closePath( )方法关闭路径。
(4)调用 CanvasRenderingContext2D 的 fill( )或 stroke( )方法来填充路径或绘制路径边框。CanvasRenderingContext2D对象提供了如下方法来添加子路径。
arc(float ×, float y, float radius, float startAngle，endAngle, boolean counterclockwise)：向 Canvas 的当前路径上添加一段弧。绘制以x、y为圆心,radius为半径，从startAngle 角度开始，到endAngle 角度结束的圆弧。startAngle、endAngle以弧度作为单位。
arcTo(float x1, float y1, float x2, float y2, float radius)：向 Canvas 的当前路径上添加一段弧。与前一个方法相比，只是定义弧的方式不同。
bezierCurve To(float cpx1, float cpY1, float cpx2, float cpY2, float x, float y)：向Canvas 的当前路径上添加一段贝济埃曲线。
lineTo(float x, floaty)：把 Canvas 的当前路径从当前结束点连接到x、y对应的点。
moveTo(float x,float y)：把 Canvas 的当前路径的结束点移动到x、y对应的点。
quadraticCurveTo(float cpX, float cpY, float x, float y)：向 Canvas 的当前路径上添加一段二次曲线。
rect(float x, float y, float width, float height)：向 Canvas 的当前路径上添加一个矩形。