哎，本来挺相信微信后台文章自动保存功能的，结果前几天写了一篇文章没保存，郁闷！

言归正传

Canvas 可以利用这几种方式绘制图形：

1、使用 lineTo 画直线；

2、使用 rect 画矩形 使用 canvas 画矩形，实现橡皮擦功能；

3、使用 arc、arcTo 画弧线；

4、使用 quadraticCurveTo，bezierCurveTo 画曲线；

通过这四种方式的不同组合，可以实现任意图形的绘制。绘制直线和矩形比较简单，但是绘制曲线就难了，比如绘制下面这几个图形：

这背后的关键知识是「数学」，我们后面慢慢聊。

先学习下画直线。Canvas 画图形需要注意几点：

1、绘制之前需要设置一个绘制的起点，表明图形要在画布的那个位置开始；

2、一个图形可能会由多个子图形组成，在开始画的时候要调用 beginPath 告诉 Canvas 要开始绘制图形了；

3、期间可以绘制各种图形；

4、调用 stroke 开始绘制，绘制之前可以设置图形的属性，比如 strokeStyle、透明度、线条宽度、顶点之间连接样式等；

下面的例子是画一条直线：

// 绘制一根线
const drawLine = (ctx: CanvasRenderingContext2D) => {// 不调用 beginPath 会有意想不到的结果ctx.beginPath();// 移动移动到某个位置，可以作为绘图的起点，或者绘制之间不连接的 path// 线宽ctx.lineWidth = 30;// 线顶点的样式 'butt', 'round', 'square'// butt 默认样式，不会导致线变长// round 圆头，会导致两顶点处的线变长 lineWidth/2// square 方头，会导致两顶点处线变长 lineWidth/2ctx.lineCap = 'round';// 在画线的过程中需要注意最终线被画到了那个区域ctx.moveTo(80, 120);// lineTo 画一条直线ctx.lineTo(320, 120);ctx.stroke();
}

大家需要留意下这条线最终的位置。

我们再看下绘制弧，Canvas 提供了两种方法 ：

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;

x：圆心在 x 轴的坐标；

y：圆心在 y 轴的坐标；

radius：圆半径；

startAngle：起始弧度值；

endAngle：结束弧度值；

anticlockwise：是否为时钟方向，false 顺时针， true 逆时针；

先来回忆下数学知识：

弧长等于半径的弧，其所对的圆心角为一弧度；

圆的弧长为 2πr，一个圆的弧度为 2πr / r = 2π，π为圆周率，约为 3.14， 2π = 2*3.14=6.28；

1π 为 180度，1度 = π / 180, 1弧度 = 180 / π；

理解了上面的知识，我们使用代码进行绘制：

const drawArcs = (ctx: CanvasRenderingContext2D) => {// arc(x, y, radius, startAngle, endAngle, counterclockwise)ctx.beginPath();// false 顺时针 true 逆时针// 弧度和角度// 弧度是角的度量单位// 弧长等于半径的弧，其所对的圆心角为一弧度// 弧度表示：弧长与半径长相等所对应的角度// 圆的弧长为 2πr，一个圆的弧度为 2πr / r = 2π，π为圆周率，约为 3.14 2π = 2*3.14=6.28// 1π 为 180度，1度 = π / 180, 1弧度 = 180 / π// 起点为 3 点钟方向// 画一弧度// ctx.arc(80, 160, 40, 0, 1, false); // Outer circle// 画 90 度// ctx.arc(80, 160, 40, 0, Math.PI / 180 * 90);ctx.arc(80, 160, 40, 0, Math.PI / 180 * 360, false);// 如何才能让起点为 12 点钟方向// ctx.arc(80, 160, 40, Math.PI / 180 * 270, Math.PI / 180 * 180, false);ctx.stroke();
}

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;

这个 API 主要用来解决给定两点绘制一段弧，比如绘制一个矩形的圆角，理解起来比较抽象，下节内容说吧。原理其实是这样的：

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/