描述
在HTML5 <canvas>标签用来绘制图形，上飞，通过脚本（通常是JavaScript）。
然而， <canvas>元素都有自己的图纸暂能力（这只是图形的容器） -你必须使用脚本来实际绘制图形。
该getContext()方法返回一个对象，它提供方法和属性，在画布上画画。
该参考文献将覆盖的属性和方法getContext("2d")的对象，它可以用于绘制文本，线，矩形，圆形和多-在画布上。
浏览器支持
在表中的数字指定完全支持元件的第一个浏览器的版本。
| 元件 | |||||
|---|---|---|---|---|---|
| <canvas> | 4 | 9 | 2.0 | 3.1 | 9 |
Internet Explorer 9中，火狐，歌剧，铬，和Safari支持<canvas>和它的属性和方法。
注：Internet Explorer 8和更早的版本，不支持<canvas>元素。
颜色，款式和阴影
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回的颜色，渐变或图案用来填充绘制 |
| strokeStyle | 设置或返回的颜色，渐变或图案用于中风 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回阴影模糊度 |
| shadowOffsetX | 设置或从外形返回阴影的水平距离 |
| shadowOffsetY | 设置或从外形返回阴影的垂直距离 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建一个线性渐变（以在画布上的内容使用） |
| createPattern() | 在重复指定的方向上指定的元素 |
| createRadialGradient() | 创建一个径向/圆形梯度（以在画布上的内容使用） |
| addColorStop() | 指定颜色和渐变对象停止位置 |
线型
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回端盖的风格一行 |
| lineJoin | 设置或返回角落创建的类型，当两条线满足 |
| lineWidth | 设置或返回当前线宽 |
| miterLimit | 设置或返回最大斜接长度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 创建一个矩形， |
| fillRect() | 绘制一个“装”的矩形 |
| strokeRect() | 绘制一个矩形（无填充颜色） |
| clearRect() | 清除一个给定的矩形内指定的像素 |
路径
| 方法 | 描述 |
|---|---|
| fill() | 填充当前绘图（路径） |
| stroke() | 其实吸引你所定义的路径 |
| beginPath() | 开始的路径，或复位电流路径 |
| moveTo() | 移动路径在画布指定的点，而无需创建一个行 |
| closePath() | 创建从当前点的路径回到起点 |
| lineTo() | 添加新的点，并在画布上创建一个从最后一个指定点线，该点 |
| clip() | 从原来的画布剪辑任何形状和大小的区域 |
| quadraticCurveTo() | 创建一个二次贝塞尔曲线 |
| bezierCurveTo() | 创建一个三次Bezier曲线 |
| arc() | 创建圆弧/曲线（用于创建圆，或圆的部分） |
| arcTo() | 创建两个切线之间的弧/曲线 |
| isPointInPath() | 如果指定点在当前路径返回true，否则为false |
转换
| 方法 | 描述 |
|---|---|
| scale() | 缩放当前的绘图大或变小 |
| rotate() | 旋转当前图纸 |
| translate() | 重新映射画布上的（0,0）位置 |
| transform() | 替换当前变换矩阵为绘图 |
| setTransform() | 重置电流变换为单位矩阵。 然后运行变换（） |
文本
| 属性 | 描述 |
|---|---|
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容的当前对齐 |
| textBaseline | 设置或返回当前文本基线绘制文本时使用 |
| 方法 | 描述 |
|---|---|
| fillText() | 绘制在画布上“装”的文字 |
| strokeText() | 绘制在画布上（无填充颜色）的文本 |
| measureText() | 返回包含指定文本的宽度对象 |
图像绘制
| 方法 | 描述 |
|---|---|
| drawImage() | 绘制的图像，帆布或视频到画布 |
像素处理
| 属性 | 描述 |
|---|---|
| width | 返回的ImageData对象的宽度 |
| height | 返回的ImageData对象的高度 |
| data | 返回包含一个指定的ImageData对象的图像数据中的对象 |
| 方法 | 描述 |
|---|---|
| createImageData() | 创建一个新的，空白的ImageData对象 |
| getImageData() | 返回的ImageData对象副本在画布上指定的矩形的像素数据 |
| putImageData() | 将图像数据（从指定的ImageData对象）放回画布 |
合成
| 属性 | 描述 |
|---|---|
| globalAlpha | 设置或返回绘图的当前alpha或透明度值 |
| globalCompositeOperation | 新的图像是如何绘制到现有的图像设置或返回 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存当前上下文的状态 |
| restore() | 返回先前保存的路径状态和属性 |
| createEvent() | |
| getContext() | |
| toDataURL() |