### 上下文 ```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);`