从简单的根基图形，到庞大炫酷的动画，通过canvas元素获取的2D图形衬着上下文CanvasRenderingContext2D，能够使用丰富的API来进行图形绘制。这篇文章将会总结在之前的canvas教程顶用到的所有衬着上下文的API。
可以参考之前的教程：
以下所介绍的要领和属性，都是CanvasRenderingContext2D东西的要领和属性。挪用方法如下：
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 使用ctx即可挪用 ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);
越发详细的接口API文档可以参考官方文档。
根基图形绘制用于绘制根基图形。越发详细的用法可以参考这篇文章：canvas根基图形绘制
矩形绘制（不需要路径）void ctx.fillRect(x, y, width, height);
绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height
void ctx.strokeRect(x, y, width, height);
在 canvas 中，使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形
void ctx.clearRect(x, y, width, height);
设置指定矩形区域内（以点 (x, y) 为起点，范畴是(width, height) ）所有像素酿成透明，并擦除之前绘制的所有内容
以上API参数说明如下：
x矩形起始点（左上角定点）的 x 轴坐标
y矩形起始点的 y 轴坐标
width矩形的宽度
height矩形的高度
绘制文本void ctx.fillText(text, x, y [, maxWidth]);
在(x,y)位置绘制（填充）文本
void ctx.strokeText(text, x, y [, maxWidth]);
在(x,y)位置绘制（描边）文本
ctx.measureText(text);
返回一个 TextMetrics 东西，包罗关于文本尺寸的信息（例如文本的宽度）
以上API参数说明如下：
x文本起点的 x 轴坐标
y文本起点的 y 轴坐标
text需要绘制的文本
maxWidth可选，绘制的最大宽度
路径图形void ctx.beginPath();
通过清空子路径列表开始一个新路径
void ctx.closePath();
使笔点返回到当前子路径的起始点。它测验考试从当前点到起始点绘制一条直线。如果图形已经是关闭的或者只有一个点，那么此要领不会做任何操纵
void ctx.moveTo(x, y);
将一个新的子路径的起始点移动到(x，y)坐标
void ctx.lineTo(x, y);
使用直线连接子路径的最后的点到x,y坐标
void ctx.quadraticCurveTo(cpx, cpy, x, y);
添加一个2次贝赛尔曲线路径
cpx, cpy第一个控制点(x,y)坐标
x,y为结束点坐标
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
添加一个3次贝赛尔曲线路径。该要领需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过挪用 moveTo() 进行改削。
cp1x, cp1y第一个控制点(x,y)坐标
cp2x, cp2y第二个控制点(x,y)坐标
x,y结束点坐标
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
绘制一段圆弧路径， 圆弧路径的圆心在 (x, y) 位置，半径为 r ，按照anticlockwise （默认为顺时针）指定的标的目的从 startAngle 开始绘制，到 endAngle 结束。
x,y为绘制圆弧地址圆上的圆心坐标
radius为半径
startAngle以及endAngle参数用以x轴为基准弧度界说了开始以及结束的弧度
anticlockwise为一个布尔值，指定绘制反向，默认为false暗示顺时针标的目的。true暗示逆时针标的目的。
void ctx.arcTo(x1, y1, x2, y2, radius);
按照控制点和半径绘制圆弧路径，使用当前的描点(前一个moveTo或lineTo等函数的止点)。按照当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径
x1,y1指定第一个控制点的坐标
x2,y2指定第二个控制点的坐标
radius指定圆弧的半径
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
添加一个椭圆路径，椭圆的圆心在（x,y）位置，半径分袂是radiusX 和 radiusY ，凭据anticlockwise （默认顺时针）指定的标的目的，从 startAngle 开始绘制，到 endAngle 结束。
x,y椭圆圆心的(x,y)坐标
radiusX椭圆长轴的半径
radiusY椭圆短轴的半径
rotation椭圆的旋转角度，以弧度暗示(非角度度数)
startAngle将要绘制的起始点角度，从 x 轴丈量，以弧度暗示(非角度度数)
endAngle椭圆将要绘制的结束点角度，以弧度暗示(非角度度数)
anticlockwise为一个布尔值，指定绘制反向，默认为false暗示顺时针标的目的。true暗示逆时针标的目的。
void ctx.rect(x, y, width, height);
创建一个矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height
路径void ctx.fill(); void ctx.fill(fillRule); void ctx.fill(path, fillRule);
使用当前的样式填充子路径
path需要填充的Path2D路径
fillRule一种算法，决定点是在路径内还是在路径外:"nonzero","evenodd"
void ctx.stroke(); void ctx.stroke(path);
使用当前的样式描边子路径
void ctx.clip(); void ctx.clip(fillRule); void ctx.clip(path, fillRule);
从当前路径创建一个剪切路径。在clip()挪用之后，绘制的所有信息只会呈此刻剪切路径内部
boolean ctx.isPointInPath(x, y); boolean ctx.isPointInPath(x, y, fillRule); boolean ctx.isPointInPath(path, x, y); boolean ctx.isPointInPath(path, x, y, fillRule);
判断当前路径是否包罗检测点
boolean ctx.isPointInStroke(x, y); boolean ctx.isPointInStroke(path, x, y);
判断检测点是否在路径的描边线上
颜色和样式控制绘制图形的颜色以及样式。越发详细的用法可以参考这篇文章：canvas样式和颜色
线型ctx.lineWidth = value;
线的宽度。默认 1.0
ctx.lineCap = "butt" || "round" || "square";
线末真个类型。 允许的值： butt (默认), round, square
ctx.lineJoin = "miter" || "round" || "bevel";
界说两线订交拐点的类型。允许的值：round, bevel, miter(默认)
ctx.miterLimit = value;
斜接面限制比例。默认 10
Array ctx.getLineDash();