了解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对象，该对象的
width属性值就是字符占据的宽度。
线条样式
下面就是与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中与渐变相关的方法就是创建线性渐变和径向渐变这两个方法。
图案相关
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.createImageData()- 创建一个新的空白的
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()- 将当前路径或给定路径滚动到视图中。
by zhangxinxu 2019-10-18 01:44:04