canvas之ctx.beginPath()

如果我们用线框模式和填充模式画一个三角形和一个填充三角形

            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');
            //线框模式
            ctx.moveTo(20,20);
            ctx.lineTo(100,100);
            ctx.lineTo(100,0);
            // 描边的颜色由strokeStyle决定
            ctx.strokeStyle = '#0000FF';
            // 对当前路径中的线段或曲线进行描边
            ctx.stroke();
            //填充模式
            ctx.moveTo(120,20);
            ctx.lineTo(200,100);
            ctx.lineTo(200,0);
            ctx.fillStyle = 'pink';
            ctx.fill();

运行结果如下

可是我们发现第一部分的也被填充了 原因是在canvas中,只能有一条路径存在，被称为"当前路径"(current path),用fill()或者stroke()对一个路径进行描边或者填充时,这条路径的所有线段、曲线都会被描成或填充指定颜色, 即使这个路径断开了，也会被填充或者 描边成指定的颜色。

[但是我们不想第一个矩形被填充,应该怎么做呢? 这时候就可以使用ctx.beginPath();](url)

            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');
            ctx.moveTo(20,20);
            ctx.lineTo(100,100);
            ctx.lineTo(100,0);
            ctx.strokeStyle = '#0000FF';
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(120,20);
            ctx.lineTo(200,100);
            ctx.lineTo(200,0);
            ctx.fillStyle = 'pink';
            ctx.fill();

beginPath() 方法开始一条路径，或重置当前的路径。