线条样式 线条样式 属性 描述 lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时，所创健的拐角类型 lineWidth 设置或返回当前的线条宽度 miterLimit 设置或返回最大斜接长度
线条样式
矩形 矩形 方法 描述 rect() 创健矩形 fillRect( 绘制被填充的矩形 strokeRect() 绘制矩形（无填充） clearRect( 在给定的矩形内清除指定的像素
矩形
路径 方法 黄述 fiulo 填充当前绘圜（路径） stroke() 绘制已定义的路径 beqinPath( 起始一条路径，或重置当前路径 moveTo() 把路径移动到画布中的指定点，不创健线条 closePath() 创健从当前点回到起始点的路径 lineToO 添加一个新点，然后在画布中创健从该点到最后指定点的线条 clip() 从原始画布剪切任意形状和尺寸的区域 quadraticCurveTo() 创健二次贝塞尔曲线 bezierCurveTo() 创健三次方贝塞尔曲线 arc() 创健弧/曲线（用于创健圆形域部分圆） arcTo() 创健两切线之间的弧/曲线 isPointInPathO 如果指定的点位于当前路径中，则返回true,否侧返回false
举例：绘制带阴影的心型 ·shadowOffsetX- 阴影的横向移动 ·shadowOffsetY--阴影的纵向移动 。shadowColor 阴影的颜色 ·shadowBlur- 阴影的模糊范围 ctx.strokeStyle="rgb(200,0,0)": ctx.fillStyle="rgb(255,0,0)"; ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ctx.shadowColor="rgba(150,0,0,0.2)"; ctx.shadowBlur=3; ctx.beginPath(); ctx.moveTo(75,60); ctx.bezierCurve To(125,20,125,100,75,115): ctx.bezierCurveTo(25,100,25,20,75,60); ctx.stroke(); ctx.fill();
举例：绘制带阴影的心型 • shadowOffsetX——阴影的横向移动 • shadowOffsetY——阴影的纵向移动 • shadowColor——阴影的颜色 • shadowBlur——阴影的模糊范围 ctx.strokeStyle="rgb(200,0,0)"; ctx.fillStyle="rgb(255,0,0)"; ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ctx.shadowColor="rgba(150,0,0,0.2)"; ctx.shadowBlur=3; ctx.beginPath(); ctx.moveTo(75,60); ctx.bezierCurveTo(125,20,125,100,75,115); ctx.bezierCurveTo(25,100,25,20,75,60); ctx.stroke(); ctx.fill();
渐变效果 方法 描述 createLinearGradient() 创健线性渐变（用在画布内容上） createPattern() 在指定的方向上重复指定的元素 createRadialGradient() 创建放射状环形的渐变（用在画布内容上】 addColorStop() 规定渐变对象中的颜色和停止位置 createLinearGradient(xStart,yStart,xEnd,yEnd) 创建并返回了一个新的CanvasGradient对象，它在指定的起始点和结束点 之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。使用 返回对象的addColorStop()来做到这一点。要使用一个渐变来勾勒线条或 填充区域，只需要把CanvasGradient对象赋给strokeStyle属性或 fillStyle属性即可
渐变效果 createLinearGradient(xStart, yStart, xEnd, yEnd) 创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点和结束点 之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。使用 返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条或 填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可