一.圆弧的绘制 arc()
基本使用函数：
ctx.arc(centerX, centerY, radius, startAngle, endAngle, antiClockwise = false)
参数说明：
- centerX, centerY: 圆心坐标
- radius: 圆的半径
- startAngle, endAngle: 起始弧度， 结束弧度
- antiClockwise: (可选参数)， 是否逆时针，默认值为false
注意点：
1.关于起始角度和结束角度，可以直接用 Math.PI表示， 例如：
ctx.arc(200, 200, 50, Math.PI / 2, Math.PI)
// 表示从 90° 到 180° 的 1/4 圆弧
2.弧度表示的值不会随是否逆时针，还是顺时针而改变
例如， 1.5pi 的位置， 逆时针时也是1.5pi， 而不是 0.5pi
1.绘制圆角矩形
绘制圆角矩形的本质就是将各条线段连接起来，关键是找到各个圆角的圆心坐标，及各个线段连接端点的坐标。
根据上面的图， 以左上角为坐标原点，找出各个点的坐标，然后写出这个圆角的路径：
const PI = Math.PI;
// 圆的路径
function roundRectPath(ctx, wid, heg, r) {
ctx.beginPath();
// 绘制左上角的第一段圆弧
ctx.arc(r,r,r, PI, 3 * PI / 2);
ctx.lineTo(wid - r, 0);
ctx.arc(wid-r, r, r, 3 * PI / 2, 2 * PI);
ctx.lineTo(wid, heg - r);
ctx.arc(wid -r, heg -r, r, 0, PI / 2);
ctx.lineTo(r, heg);
ctx.arc(r, heg - r, r, PI / 2, PI);
ctx.closePath()
}
然后对其进行封装：
// 另一层封装
function drawRoundRect(ctx, x, y, wid, heg, r, color) {
if (wid === heg && wid === 2 * r) {
ctx.arc(x, y, r, 0, 2 * PI);
} else if (2 * r > wid || 2 * r > heg) {
return 'radius is too big'；
}
ctx.save();
ctx.translate(x, y);
roundRectPath(ctx, wid, heg, r);
ctx.lineWidth = 10;
ctx.strokeStyle = color || 'black';
ctx.stroke();
ctx.restore();
}
具体效果 圆角矩形
2.绘制2048图像的格子
在1的基础上， 进行另一种封装，然后利用2层循环，绘制16个小格子，要点在于每个小格子坐标的规律
二.arcTo()
根据起始点(x0, y0), 以及(x1, y1), (x2, y2)形成折线，找到切点来绘制圆弧
ctx.moveTo(x0, y0) // 一般配合moveTo()来选择控制点
ctx.arcTo(
x1, y1, // 控制点
x2, y2, // 控制点
r // 圆弧半径
)
注意点：
- 绘制一定会从起始点开始，但是圆弧不一点从起始点开始，而是折线的切点，这个切点有可能在折线上，也有可能不再折线上
- 一般会配合 moveTo(x0, y0) 来设置起始点
实例，绘制弯月
绘制弯月的关键在于分析出圆弧之间的关系和圆弧的半径（OA），以及控制点的设置(C点和B点)
AB外层圆弧使用 arc()绘制，圆点坐标为(400, 400),
AB内层圆弧使用 arcTo() 绘制，起始点为(400, 100), 另外2个控制点为 (1200, 400), (400, 700)
三.quadraticCurveTo() 二次贝塞尔曲线
可以使用这个工具网站来完成 二次贝塞尔曲线
这个和上面的arcTo()比较像，不过更加好用点
// 配合 moveTo()使用
ctx.moveTo(x0, y0) // 起始点
ctx.quadraticCurveTo(
x1, y1, // 控制点
x2, y2 // 终止点
)
注意点：
- 绘制的曲线的起点的终止点就是声明的(x0, y0), (x1, y1),这点和arcTo() 显著的不同
四.bezierCurveTo() 三次贝塞尔曲线
这个曲线功能更加的强大，有2个控制点，可以绘制出更丰富的曲线，
同样可以使用这个工具网站来完成 三次贝塞尔曲线
// 配合moveTo()设置起点
ctx.moveTo(x0, y0)
ctx.bezierCurveTo(
x1, y1, // 控制点1
x2, y2, // 控制点2
x3, y3 // 终止点
)
总结
本章主要是将绘制曲线的4个函数：
- arc(centerX, centerY, radius, startAngle, endAngle, antiClockwise = false)
- arcTo(x1, y1, x2, y2, raduis)
- quadraticCurveTo(x1, y1, x2, y2)
- bezierCurveTo(x1, y1, x2, y2, x3, y3)
要注意函数中参数的意义。
其中贝塞尔二次和三次曲线功能比较强大，暂时了解比较少，有待进一步学习
