用Canvas绘制圆弧与圆角（4）

用Canvas绘制圆弧与圆角（4）

首先清楚一点

角度 X (Math.PI/180) = 角度对应的弧度

arc(x, y, r, startRad, endRad, 弧形方向)

此方法用于绘制圆弧

弧形方向——1为逆时针，0为顺时针

ctx.arc(250, 250, 100, 0, Math.PI/2, 0);
ctx.stroke();

arcTo(x1, y1, x2, y2, r)

用于绘制圆角

r表示圆角半径（即用半径为多少的圆去与这个夹角两边相切）

画笔当前所在点，(x1,y1)，(x2,y2)这三点连起来会形成一个夹角，然后绘制一段与夹角的两边相切并且半径为r的弧线即为圆角

ctx.moveTo(100, 100);
ctx.arcTo(200, 100, 150, 200, 20);
ctx.stroke();

看下一篇——用Canvas绘制贝塞尔曲线（5）