### 上下文 ```js let canvas = document.querySelector('#canvas') let ctx = canvas.getContext('2d') ``` ### 坐標系  ### API * 設置繪制起點：`ctx.moveTo(x,y)` * 直線：`ctx.lineTo(x,y)` * 路徑的開合：`ctx.beginPath(),ctx.closePath()` * 描邊：`ctx.stoke()` * 填充：`ctx.fill()`,將閉合路徑的內容填充具體的顏色 * 矩形：`ctx.rect(x,y,width,height)` * 描邊矩形和填充矩形：`ctx.strokeRect(x,y,width,height),ctx.fillRect(x,y,width,height)` * 清除矩形：`ctx.clearRect()` * 畫圓：`ctx.arc(x,y,r,startAngle,endAngle,counterclockwise即是否是逆時針)` canvas 繪制的基本步驟： * 第一步：獲得上下文 =>canvasElem.getContext('2d'); * 第二步：開始路徑規劃 =>ctx.beginPath() * 第三步：移動起始點 =>ctx.moveTo(x, y) * 第四步：繪制線(矩形、圓形、圖片...) =>ctx.lineTo(x, y) * 第五步：閉合路徑 =>ctx.closePath(); * 第六步：繪制描邊 =>ctx.stroke(); ### 文字  * `fillText(text,x,y,maxwidth)` * `measureText(txt).width`：返回文本的寬度 textAlign 設置或返回文本內容的當前對齊方式 * start : 默認。文本在指定的位置開始。 * end : 文本在指定的位置結束。 * center: 文本的中心被放置在指定的位置。 * left : 文本左對齊。 * right : 文本右對齊。  textBaseline 設置或返回在繪制文本時使用的當前文本基線 * alphabetic ： 默認。文本基線是普通的字母基線。 * top ： 文本基線是 em 方框的頂端。。 * hanging ： 文本基線是懸掛基線。 * middle ： 文本基線是 em 方框的正中。 * ideographic： 文本基線是 em 基線。 * bottom ： 文本基線是 em 方框的底端。  ### 圖片 * 加載圖片：`context.drawImage(img,x,y,width,height);` * 裁剪圖片：`context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);`