HTML5 的 canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器），所以必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本文会介绍完整的 getContext(“2d”) 对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
| 画布 | ||||
|---|---|---|---|---|
| 功能 | 名称 | 描述 | 备注 | 实例链接 |
| 颜色/样式/阴影 | fillStyle | 置或返回用于填充绘画的颜色、渐变或模式 | 默认值为 #000000 | 实例链接 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 | 默认值为 #000000 | 实例链接 | |
| shadowColor | 设置或返回用于阴影的颜色 | shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影 | 实例链接 | |
| shadowBlur | 设置或返回阴影的模糊级数 | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
| shadowOffsetX | 设置或返回阴影与形状的水平距离 | 如需调整阴影与形状的垂直距离，请使用 shadowOffsetY 属性 | 实例链接 | |
| shadowOffsetY | 设置或返回阴影与形状的垂直距离 | 如需调整阴影与形状的水平距离，请使用 shadowOffsetX 属性 | 实例链接 | |
| createLinearGradient() | 创建线性的渐变对象 | 请使用该对象作为 strokeStyle 或 fillStyle 属性的值 请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色 |
实例链接 | |
| createPattern() | 在指定的方向内重复指定的元素 | 元素可以是图片、视频，或者其他 canvas 元素 被重复的元素可用于绘制/填充矩形、圆形或线条等等 |
实例链接 | |
| createRadialGradient() | 创建放射状/圆形渐变对象 | 请使用该对象作为 strokeStyle 或 fillStyle 属性的值 请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色 |
实例链接 | |
| addColorStop() | 规定渐变对象中的颜色和位置 | 可以多次调用 addColorStop() 方法来改变渐变 为了获得可见的渐变，您需要创建至少一个色标 |
实例链接 | |
| 线条样式 | lineCap | 设置或返回线条末端线帽的样式 | "round" 和 "square" 值会使线条略微变长 | 实例链接 |
| lineJoin | 设置或返回所创建边角的类型，当两条线交汇时 | "miter" 值受 miterLimit 属性的影响 | 实例链接 | |
| lineWidth | 设置或返回当前线条的宽度，以像素计 | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
| miterLimit | 设置或返回最大斜接长度 (斜接长度指的是在两条线交汇处内角和外角之间的距离) |
只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效 | 实例链接 | |
| 矩形 | rect() | 创建矩形 | 使用 stroke() 或 fill() 方法在画布上实际地绘制矩形 | 实例链接 |
| fillRect() | 绘制"已填充"的矩形 | 默认的填充颜色是黑色 使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式 |
实例链接 | |
| strokeRect() | 绘制矩形（无填充） | 笔触的默认颜色是黑色 使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。 |
实例链接 | |
| clearRect() | 清空给定矩形内的指定像素 | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
| 路径 | fill() | 填充当前的图像（路径） | 默认颜色是黑色 使用 fillStyle 属性来填充另一种颜色/渐变 如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径（正如 closePath() 一样），然后填充该路径 |
实例链接 |
| stroke() | 会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径 | 默认颜色是黑色 使用 strokeStyle 属性来绘制另一种颜色/渐变 |
实例链接 | |
| beginPath() | 开始一条路径，或重置当前的路径 | 使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc() 使用 stroke() 方法在画布上绘制确切的路径 |
实例链接 | |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 | 使用 stroke() 方法在画布上绘制确切的路径 | 实例链接 | |
| closePath() | 创建从当前点到开始点的路径 | 使用 stroke() 方法在画布上绘制确切的路径 使用 fill() 方法来填充图像 使用 fillStyle 属性来填充另一个颜色/渐变 |
实例链接 | |
| lineTo() | 添加一个新点，然后创建从该点到画布中最后指定点的线条 | 该方法并不会创建线条 使用 stroke() 方法在画布上绘制确切的路径 |
实例链接 | |
| clip() | 从原始画布中剪切任意形状和尺寸 | 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复 |
实例链接 | |
| quadraticCurveTo() | 使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点 | 第一点是用于二次贝塞尔中的控制点，第二个点是曲线的结束点 曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点 |
实例链接 | |
| bezierCurveTo() | 通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点 | 前两点是用于三次贝塞尔中的控制点，第三点是曲线的结束点 曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点 |
实例链接 | |
| arc() | 创建弧/曲线（用于创建圆或部分圆） | 通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI 使用 stroke() 或 fill() 方法在画布上绘制实际的弧 |
实例链接 | |
| arcTo() | 画布上创建介于两个切线之间的弧/曲线 | 使用 stroke() 方法在画布上绘制确切的弧 | 实例链接 | |
| isPointInPath() | 如果指定的点位于当前路径中，isPointInPath() 方法返回 true，否则返回 false | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
| 转换 | scale() | 缩放当前绘图至更大或更小 | 对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放 | 实例链接 |
| rotate() | 旋转当前的绘图 | 旋转只会影响到旋转完成后的绘图 | 实例链接 | |
| translate() | 重新映射画布上的 (0,0) 位置 | 在 translate() 之后调用诸如 fillRect() 之类的方法时，值会添加到 x 和 y 坐标值上 | 实例链接 | |
| transform() | 替换当前的变换矩阵(transform() 允许您缩放、旋转、移动并倾斜当前的环境) | 该变换只会影响 transform() 方法调用之后的绘图 | 实例链接 | |
| setTransform() | 把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform() | 该变换只会影响 setTransform() 方法调用之后的绘图 | 实例链接 | |
| 文本 | font | 设置或返回画布上文本内容的当前字体属 | 使用的语法与 CSS font 属性 相同 | 实例链接 |
| textAlign | 根据锚点，设置或返回文本内容的当前对齐方式 | 使用 fillText() 或 strokeText() 方法在画布上实际地绘制并定位文本 | 实例链接 | |
| textBaseline | 设置或返回在绘制文本时的当前文本基线 | fillText() 和 strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值 | 实例链接 | |
| fillText() | 在画布上绘制填色的文本 | 使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本 | 实例链接 | |
| strokeText() | 在画布上绘制文本（无填充色） | 使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本 | 实例链接 | |
| measureText() | 返回一个对象，该对象包含以像素计的指定字体宽度 | 需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法 | 实例链接 | |
| 图像绘制 | drawImage() | 在画布上绘制图像、画布或视频 | 也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸 | 实例链接 |
| 像素操作 | width | 返回 ImageData 对象的宽度，以像素计 | 参阅 createImageData()、 getImageData() 和 putImageData() 方法，以获得更多关于 ImageData 对象的知识 | 实例链接 |
| height | 返回 ImageData 对象的高度，以像素计 | 参阅 createImageData()、 getImageData() 和 putImageData() 方法，以获得更多关于 ImageData 对象的知识 | 实例链接 | |
| data | 返回一个对象，该对象包含指定的 ImageData 对象的图像数据 | 参阅 createImageData()、 getImageData() 和 putImageData() 方法，以获得更多关于 ImageData 对象的知识 | 实例链接 | |
| createImageData() | 创建新的空白 ImageData 对象。新对象的默认像素值 transparent black | 操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上 | 实例链接 | |
| getImageData() | 返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据 | ImageData 对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息 操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上 |
实例链接 | |
| putImageData() | 将图像数据（从指定的 ImageData 对象）放回画布上 | 参阅 getImageData() 方法，它可复制画布上指定的矩形的像素数据 参阅 createImageData() 方法，它可创建新的空白 ImageData 对象 |
实例链接 | |
| 合成 | globalAlpha | 设置或返回绘图的当前透明值（alpha 或 transparency） | 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字 | 实例链接 |
| globalCompositeOperation | 设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上 | - | 实例链接 | |
| 其他 | save() | 保存当前环境的状态 | - | - |
| restore() | 返回之前保存过的路径状态和属性 | - | - | |
| createEvent() | 返回新创建的 Event 对象，具有指定的类型 | - | - | |
| getContext() | 返回一个用于在画布上绘图的环境 | - | - | |
| toDataURL() | 返回的数据是一个字符串，表示包含抓取的图形数据的编码URL | - | - | |