###canvas繪製路徑 圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。 ###步驟 1.首先，你需要建立路徑起始點。 2.然後你使用畫圖命令去畫出路徑 3.之後你把路徑封閉。 4.一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。 ###繪製三角形 beginPath() 新建一條路徑，生成之後，圖形繪製命令被指向到路徑上準備生成路徑。 生成路徑的第一步叫做beginPath()。本質上，路徑是由很多子路徑構成，這些子路徑都是在一個列表中， 所有的子路徑（線、弧形、等等）構成圖形。而每次這個方法呼叫之後，列表清空重置， 然後我們就可以重新繪製新的圖形。 moveTo(x,y) 將筆觸移動到指定的座標x以及y上 當canvas初始化或者beginPath()呼叫後，你通常會使用moveTo()函式設定起點 lineTo(x,y) 將筆觸移動到指定的座標x以及y上 繪製一條從當前位置到指定x以及y位置的直線。 closePath() 閉合路徑之後圖形繪製命令又重新指向到上下文中。 閉合路徑closePath(),不是必需的。這個方法會通過繪製一條從當前點到開始點的直線來閉合圖形。 如果圖形是已經閉合了的，即當前點為開始點，該函式什麼也不做 當你呼叫fill()函式時，所有沒有閉合的形狀都會自動閉合，所以你不需要呼叫closePath()函式。 但是呼叫stroke()時不會自動閉合 stroke() 通過線條來繪製圖形輪廓。 不會自動呼叫closePath() fill() 通過填充路徑的內容區域生成實心的圖形。 自動呼叫closePath() ###繪製矩形 rect(x,y,width,height) 繪製一個左上角座標為（x,y），寬高為width以及height的矩形。 當該方法執行的時候，moveTo()方法自動設定座標引數（0,0）。 也就是說，當前筆觸自動重置會預設座標 ###lineCap lineCap是Canvas2DAPI指定如何繪製每一條線段末端的屬性。 有3個可能的值，分別是： butt:線段末端以方形結束。 round:線段末端以圓形結束 square:線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域 預設值是butt。 ###save save()是Canvas2DAPI通過將當前狀態放入棧中，儲存canvas全部狀態的方法 儲存到棧中的繪製狀態有下面部分組成： 當前的變換矩陣。 當前的剪下區域。 當前的虛線列表. 以下屬性當前的值：strokeStyle, fillStyle, lineWidth, lineCap, lineJoin... ###restore restore()是Canvas2DAPI通過在繪圖狀態棧中彈出頂端的狀態，將canvas恢復到最近的儲存狀態的方法。 如果沒有儲存狀態，此方法不做任何改變。

            //querySelector身上有坑
            //拿到畫布
            var canvas = document.querySelector("#test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
                
                ctx.strokeStyle="deeppink";
                ctx.fillStyle="green"
                ctx.lineWidth
 
=4;
                
                ctx.moveTo(100,100);
                ctx.lineTo(100,200);
                ctx.lineTo(200,200);
                ctx.closePath();
                ctx.fill();
                
                
                //清空路徑容器
                ctx.beginPath();
                ctx.moveTo(200,200);
                ctx.lineTo(
 
200,300);
                ctx.lineTo(300,300);
                ctx.closePath();
                ctx.stroke();
                
            }