把数学学好才能画好图形-优快云博客

本文介绍了HTML5 Canvas用于图形绘制的基本方法，包括使用lineTo画直线，rect画矩形，arc和arcTo画弧线，以及quadraticCurveTo和bezierCurveTo画曲线。重点讨论了绘制曲线的难点，并提供了代码示例来演示如何绘制直线和弧线。此外，还强调了在Canvas中绘制图形时应注意的几个关键点，如设置起点、调用beginPath以及设置图形属性。

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

言归正传

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/2
    ctx.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();
}