路径

2023年08月11日

柏拉文

越努力，越幸运

一、流程

---

1.1 创建路径

使用 ctx.beginPath() 新建一条路径, 生成之后, 图形绘制命令被指向到路径上生成路径。

生成路径的第一步叫做 beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

1.2 制作路径

1.3 闭合路径

使用 ctx.closePath 闭合路径。，就是闭合路径 closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。

1.4 绘制路径

通过 stroke() 使用线条来绘制图形轮廓; 通过 fill 通过填充路径的内容区域生成实心的图形。

二、示例

---

2.1 三角形

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'blue';
    ctx.strokeStyle = 'red';

    // 1. 创建路径
    ctx.beginPath();

    // 2. 制作路径
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.lineTo(0, 100);

    // 3. 闭合路径
    ctx.closePath();

    // 绘制路径
    ctx.stroke();

    // 填充路径内容
    ctx.fill();