HTML5 CANVAS畫圖 beginPath和closePath

beginPath這個canvas函數我很早就講過了，他的作用很簡單，就是開始一段新路徑，我們先來看下面的一小段代碼：

var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();

上面的代碼會得到什么樣的圖形呢？是不是一條黑線一條紅線呢？

從代碼上看，我們的邏輯毫無問題，但結果是我們得到的是兩條紅線，並不是一黑一紅。

如果你明白這是為什么，那后面的你就不用看了。這就是beginPath的重要性。

canvas中的繪制方法（如stroke,fill），都會以“上一次beginPath”之后的所有路徑為基礎進行繪制。比如上面的代碼里面我stroke了兩次，其實這兩次都是以第一次beginPath后的所有路徑為基礎畫的。也就是說第一條路徑我們stroke了兩下，第一下是黑的，第二下是紅的，所以最終也是紅的。

1. 不管你用moveTo把畫筆移動到哪里，只要不beginPath，那你一直都是在畫一條路徑。
2. fillRect與strokeRect這種直接畫出獨立區域的函數，也不會打斷當前的path.

如果你畫出的圖形和你想像的不一樣，記得查看是否有合理的beginPath.

說到beginPath，就不得不提到closePath，兩者是不是有很“緊”的聯系呢？答案是幾乎沒有關系。

closePath的意思不是結束路徑，而是關閉路徑，它會試圖從（MoveTo點之后）當前路徑的終點連一條路徑到起點，讓整個路徑閉合起來。但是，這並不意味着它之后的路徑就是新路徑了！

我們在上面的代碼的第一個lineTo后面加上closePath，可以發現還是得到了兩條紅線。

但如果我們在第一個stroke后面加上beginPath，則會如願得到一條黑線一條紅線。

ctx.stroke();
ctx.beginPath(); //注意啦！
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();

總而言之，就是不要企圖通過閉合現有路徑來開始一條新路徑，而開始一條新路徑，以前的路徑也不會閉合。

 var ctx = document.getElementById('myCanvas').getContext('2d');
        ctx.beginPath();
        ctx.moveTo(100.5, 20.5);
        ctx.lineTo(200.5, 20.5);

        ctx.moveTo(110.5, 25.5);
        ctx.lineTo(210.5, 25.5);
        //ctx.stroke();
        //ctx.beginPath();
        //ctx.moveTo(100.5, 40.5);
        ctx.lineTo(200.5, 40.5)
        ctx.strokeStyle = '#f00';
        ctx.closePath();
        ctx.stroke();

結果如下：

ctx.moveTo(110.5, 25.5);與ctx.lineTo(200.5, 40.5)進行鏈接。