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() 方法开始一条路径，或重置当前的路径。