小白学canvas-圆，弧线，圆角矩形

圆形

• 调用 beginPath() 方法声明开始一个新路径
• 使用 arc(x,y,半径,开始角度,结束角度,anticlockwise) 画圆
  （x,y）表示圆心坐标
  角度泽勇用 度数*MAth.PI/180 来表示更为直观
  anticlockwise是一个布尔值，默认为 false（顺时针），当为 true 时表示逆时针
• 使用 closePath()方法来闭合当前路径
• 使用 stroke()，fill() 方法将以上描述的状态显示出来

画只 小瓢虫

灯泡眼瓢虫

弧线 - 圆形一部分

上面的绘画中 触须 用到了圆形一部分的弧线，现在把它们单独提取出来看。
画弧线有两种方法，一种用act()，一种用actTo()

act(x,y,半径，开始角度，结束角度，布尔值) 方法

例：从0°到-90°逆时针画一条弧线，0*Math.PI/180可简写为0

act( )方法图解

cxt.beginPath();
cxt.arc(90,45,30,0,-90*Math.PI/180,true);
//添加closePath()起点终点间会有一条直线链接起来
//cxt.closePath(); 
cxt.strokeStyle="red";
cxt.stroke();

对比图

actTo(cx,cy,x2,y2,圆弧半径) 方法

• 由moveTo()或lineTo()确定弧线起始点，可先画一条线段，再接弧线
  如起始点距离弧线有一段距离，将会自动补上线条，对于处女座应该忍不了
• 确定起始、终止两点处切线交汇点：控制点坐标(cx,cy)
• 确定终止点坐标(x2,y2)

例：起始点为(130,45)，控制点为(130,15)，结束点为(160,15)，半径为30的一段弧

arcTo()方法举例图解

cxt.beginPath();
cxt.moveTo(130,45);
cxt.arcTo(130,15,160,15,30);
cxt.strokeStyle="blue";
cxt.stroke();

如两根线的样式相同，可描述玩路径后，再进行显示步骤

圆角矩形函数封装

圆角矩形