Canvas：繪製路徑

繪製路徑

　　圖形的基本元素是路徑。路徑是[通過不同顏色和寬度的線段或曲線相連形成的不同形狀的]點的集合。一個路徑，甚至一個子路徑，都是閉合的。

　　使用路徑繪製圖形需要一些額外的步驟。

1. 首先，你需要建立路徑起始點。
2. 然後你使用畫圖命令去繪製路徑。
3. 之後把路徑進行封閉。
4. 一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。

函式解釋

beginPath()

【說明】：清空子路徑列表，並新建一條路徑。

【例子】：繪製兩條顏色不同的直線。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

說明：如果我們在Second Path部分刪掉 ctx.beginPath(); 那麼最後一行的stroke將會重新繪製所有的兩條路徑，也就是說第一條路徑被繪製了兩次，且第二次的效果覆蓋了第一次。

moveTo()/lineTo()

【說明】

　　moveTo:將一個新的子路徑的起始點移動到(x，y)座標的方法。

　　lineTo:使用直線連線子路徑的終點到x，y座標的方法（並不會真正地繪製）。

說明：這兩個方法都不會真正繪製圖形，相當於隱形墨水，來描述路徑，我們知道stroke和fill方法才會真正描邊或者填充圖形。

closePath()

【說明】：

【例項】：繪製一個三角形

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 150);   // Move pen to bottom-left corner
ctx.lineTo(120, 20);   // Line to top corner
ctx.lineTo(220, 150);  // Line to bottom-right corner
ctx.closePath();       // Line to bottom-left corner
ctx.stroke();

說明：我們只使用lineTo畫了兩條子路徑，但是效果是一個三角形，這是因為最後的closePath()，繪製了一條指向開始點的直線。

例項：繪製一個網格

程式碼

    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');

        function drawGrid(context,color,stepx,stepy) {
            context.strokeStyle = color;
            context.lineWidth = 0.5;
            for(var i = stepx+0.5;i<context.canvas.width;i+=stepx)
            {
                context.beginPath();
                context.moveTo(i,0);
                context.lineTo(i,context.canvas.height);
                context.stroke();
            }
            for(var i = stepy+0.5;i<context.canvas.height;i+=stepy)
            {
                context.beginPath();
                context.moveTo(0,i);
                context.lineTo(context.canvas.width,i);
                context.stroke();
            }
        }

        drawGrid(context,"lightgray",10,10);
    </script>　　

效果