[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() } ```