[TOC] ## 繪制直線 ### 方法 ``` beginPath() 新建一條路徑，路徑一旦創建成功，圖形繪制命令被指向到路徑上生成路徑 moveTo(x, y) 把畫筆移動到指定的坐標(x, y)。相當于設置路徑的起始點坐標。 lineTo(x,y) 繪制一條從當前位置到指定坐標(x,y)的直線 closePath() 閉合路徑之后，圖形繪制命令又重新指向到上下文中 stroke() 通過線條來繪制圖形輪廓 fill() 通過填充路徑的內容區域生成實心的圖形 ``` ### 實例 繪制長方形 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); // style 必須寫在前面 ctx.strokeStyle="rgb(200,0,0)" ctx.fillStyle="rgb(200,0,0)" ctx.beginPath() ctx.moveTo(10,10) ctx.lineTo(100,10) ctx.lineTo(100,100) ctx.lineTo(10,100) ctx.closePath() ctx.stroke() ctx.fill() } ```