简介
了解CanvasRenderingContext2D CanvasRenderingContext2D顾名思义就是“Canvas 2D渲染上下文”，可以理解为下面代码中的context。
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context暴露了大量的API属性和方法，可以用来绘制文本，图形以及像素处理等，可以说是2D Canvas应用的核心所在。
按照功能，可以对这些暴露的标准API属性和方法进行如下的分组：
绘制矩形
下面就是Canvas中与矩形绘制相关的几个方法。
CanvasRenderingContext2D.clearRect(): 清除指定矩形区域内部所有的像素信息为初始色（通常为透明）。
CanvasRenderingContext2D.fillRect(): 矩形填充，可以填充颜色，渐变，图案等。
CanvasRenderingContext2D.strokeRect(): 矩形描边。
绘制文本
下面就是Canvas中与文本绘制相关的几个方法。
CanvasRenderingContext2D.fillText():文字填充，可以填充纯色，渐变或者图案。
CanvasRenderingContext2D.strokeText():文字描边。
CanvasRenderingContext2D.measureText():文字测量。返回TextMetrics对象，该对象的属性值就是字符占据的宽度。
线条样式
下面就是与Canvas中与线条样式相关的若干属性和方法。 CanvasRenderingContext2D.lineWidth:线条宽度，主使用场景是描边，默认宽度是1.0，支持小数。
CanvasRenderingContext2D.lineCap:线条端点的样式。支持如下属性值：butt（默认值，断头，无端帽），round（圆形端帽），square（方形端帽）。
CanvasRenderingContext2D.lineJoin:线条转角的样式。支持如下属性值：miter（默认值，尖角），round（圆角），bevel（平角）。
CanvasRenderingContext2D.miterLimit:尖角限制比率。线条的尖角如果没有限制，在线条粗角度小的情况下会很长很长，因此，需要一个限制比率。默认是10。
CanvasRenderingContext2D.getLineDash():返回当前虚线数值。返回值是一个偶数个数的数组
CanvasRenderingContext2D.setLineDash():设置线条为虚线。
CanvasRenderingContext2D.lineDashOffset:设置虚线的起始偏移。
文本样式
下面就是与Canvas中与文本样式相关的若干属性和方法。
CanvasRenderingContext2D.font:设置字体相关样式，包括字号，字体信息。默认值是10px sans-serif。
CanvasRenderingContext2D.textAlign:设置文本水平对齐方式。支持属性值有：start（默认值），end，left，right以及center。
CanvasRenderingContext2D.textBaseline:设置文本基线对齐方式。支持属性值有：top，hanging，middle，alphabetic（默认值），ideographic，bottom。
CanvasRenderingContext2D.direction:设置文本显示方向。支持属性值有：inherit（默认值），ltr和rtl。
填充和描边
就是下面这两个属性和两个方法，是高频使用的API。
CanvasRenderingContext2D.fillStyle:填充样式。默认值是#000000纯黑色。
CanvasRenderingContext2D.fill():填充
CanvasRenderingContext2D.strokeStyle:描边样式。默认值是#000000纯黑色。
CanvasRenderingContext2D.stroke():描边。
渐变相关
Canvas中与渐变相关的方法就是创建线性渐变和径向渐变这两个方法。
CanvasRenderingContext2D.createLinearGradient():创建线性渐变。
CanvasRenderingContext2D.createRadialGradient():创建径向渐变。
图案相关
Canvas中与图案相关的方法就是创建图案对象方法。 CanvasRenderingContext2D.createPattern():创建图案。图案内容可以是图片，可以是canvas元素，也可以是渐变。此方法返回CanvasPattern对象。
阴影相关
Canvas中与阴影相关的属性就是下面这些。 CanvasRenderingContext2D.shadowBlur:阴影模糊大小。默认值是0。
CanvasRenderingContext2D.shadowColor:阴影颜色。默认值是全透明黑色。
CanvasRenderingContext2D.shadowOffsetX:阴影水平偏移大小。默认值是0。
CanvasRenderingContext2D.shadowOffsetY:阴影垂直偏移大小。默认值是0。
绘制路径
下面的方法可以用来处理路径对象。
CanvasRenderingContext2D.beginPath():开始一个新路径。
CanvasRenderingContext2D.closePath():闭合一个路径。
CanvasRenderingContext2D.moveTo():路径绘制起始点。
CanvasRenderingContext2D.lineTo():绘制直线到指定坐标点。
CanvasRenderingContext2D.bezierCurveTo():绘制贝赛尔曲线到指定坐标点。
CanvasRenderingContext2D.quadraticCurveTo():绘制二次贝赛尔曲线到指定坐标点。
CanvasRenderingContext2D.arc():绘制圆弧（包括圆）。
CanvasRenderingContext2D.arcTo():绘制圆弧，和之前的点以直线相连。
CanvasRenderingContext2D.rect():绘制矩形路径。
CanvasRenderingContext2D.ellipse():绘制椭圆路径。
CanvasRenderingContext2D.clip():创建剪裁路径，之后绘制的路径只有在里面的才会显示。
位置检测
下面这两个方法可以判定某个坐标点是否路径或者描边中。
CanvasRenderingContext2D.isPointInPath():当前点是否在指定路径内。
CanvasRenderingContext2D.isPointInStroke():当前点是否在指定路径描边上。
变换
旋转缩放等变换方法。
CanvasRenderingContext2D.rotate():旋转。
CanvasRenderingContext2D.scale():缩放。
CanvasRenderingContext2D.translate():位移。
CanvasRenderingContext2D.transform():当前矩阵变换基础上再次矩阵变换。
CanvasRenderingContext2D.setTransform():直接重置为当前设置的矩阵变换。
透明度和层级
一个是控制全局透明度，另外一个可以改变层级关系，设置混合模式，以及实现遮罩效果等。
CanvasRenderingContext2D.globalAlpha:全局透明度。
CanvasRenderingContext2D.globalCompositeOperation:设置图形叠加时候的混合方式，可以用来改变绘制元素上下叠加关系，也就是层级。
图片与像素
绘制图片和图像像素信息处理方法。
CanvasRenderingContext2D.drawImage():图片绘制在画布上。
CanvasRenderingContext2D.reateImageData():创建一个新的空白的ImageData对象。
CanvasRenderingContext2D.getImageData():获取Canvas画布的设定区域的ImageData对象。
CanvasRenderingContext2D.putImageData():给定的ImageData对象应用在Canvas画布上。
Canvas状态
Canvas状态管理几个方法。
CanvasRenderingContext2D.save():存储当前Canvas的状态。
CanvasRenderingContext2D.restore():恢复Canvas到前一次存储的状态。
CanvasRenderingContext2D.canvas():反向识别当前上下文源自哪个HTMLCanvasElement
其他方法
其他一些不常用的API方法。
CanvasRenderingContext2D.drawFocusIfNeeded():如果给定元素被聚焦，则该方法在当前路径周围绘制焦点环。
CanvasRenderingContext2D.scrollPathIntoView():将当前路径或给定路径滚动到视图中。
总结:
以上总结了Canvas中的Canvas 2D的所有的方法及属性,具体的使用方法会在以后再详细介绍,欢迎大佬观摩，再次感谢大家，觉得不错的可以一键三连。
- 我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
