closePath

2023年08月12日

柏拉文

越努力，越幸运

一、认识

---

ctx.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。

二、语法

---

ctx.closePath();

三、场景

---

3.1 三角形

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

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

    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.lineTo(0, 100);
    ctx.closePath();
    ctx.stroke();
</script>