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() 方法開始一條路徑，或重置當前的路徑。