canvas 的 2D context 可以绘制简单的 2D 图形。它的 2D context 坐标开始于 元素的左上角，原点坐标是（0,0）。所有的坐标值都基于这个原点，x 值越大表示越靠右，y 值越大表示越靠下。width 和 height 表示水平和垂直方向上可用的像素数。
1 填充和描边
填充就是用指定的样式填充图形；而描边就是给图形的边缘画线。它们分别对应两个属性：fillStyle 和 strokeStyle。这两个属性的值可以是字符串、渐变对象或者模式对象。默认值都是 “#00000”。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式（颜色名、十六进制码、rgb、rgba、hsl 或 hsla）：
var drawing = document.getElementById("drawing");
if (drawing.getContext) {//确定浏览器支持 canvas
var context = drawing.getContext("2d");
var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
}
2 绘制矩形
矩形是唯一一种直接可以在 2D context 中绘制的图形。它有 3 种方法：fillRect()、strokeRect() 和 clearRect()。它们都接收 4 个 参数：矩形的 x 坐标、y 坐标、矩形的宽度以及高度，这些参数的单位都是像素。
fillRect() 会为矩形填充指定的颜色，颜色是通过 fillStyle 属性进行设置的：
因为第二个矩形是半透明的，所以你可以透过上面的蓝色矩形看到下面的红色矩形：
strokeRect() 会使用指定的颜色为矩形描边，描边的颜色是通过 strokeStyle 指定的：
注意： lineWidth 属性控制着描边线条的宽度，它可以是任意整数。lineCap 属性可以控制线条末端的形状（平头【butt】、圆头【round】或方头【squre】）。lineJoin 控制线条相交的方式（圆交【round】、斜角【bevel】或斜接【miter】）。
clearRect() 可以清除画布上的矩形区域。它是通过把某一矩形区域变透明来实现的。通过绘制形状然后在清除指定区域后，会生成很有意思的效果：
3 绘制路径
使用路径可以绘制出很复杂的形状和线条。必须先调用 beginPath() 方法，然后再通过以下方法来绘制路径：
| 方法 | 说明 |
|---|---|
| arc(x, y, radius, startAngle, endAngle, counterclockwise) | 以 (x,y) 为圆心绘制一条弧线，它的半径是 radius。startAngle 是起始角度，endAngle 是结束角度，它们的单位都是弧度。counterclockwise 表示起始和结束角度是否按逆时针方向计算。 |
| arcTo(x1, y1, x2, y2, radius) | 从上一点开始绘制弧线，以给定的半径（radius）穿过 （x1, y1)，直到 (x2, y2) 为止。 |
| bezierCurveTo(c1x, c1y, c2x, c2y, x, y) | 从上一点开始绘制曲线，以 (c1x, c1y) 和 (c2x, c2y) 为控制点，开始绘制曲线。 |
| lineTo(x, y) | 从上一点开始绘制直线，到 (x, y) 为止。 |
| moveTo(x, y) | 将绘图的游标移动到 (x, y) ，只是移动不画线。 |
| quadraticCurveTo(cx, cy, x, y) | 从上一点开始绘制二次曲线，以 （cx, cy）作为控制点，到 (x, y) 为止。 |
| rect(x, y, width, height) | 从点（x, y） 开始绘制矩形，width 和 height 分别代表宽和高，它绘制的是矩形路径，而不是我们之前说过的矩形形状。 |
创建路径后，有这些选择：
- 调用 closePath() 可以绘制一条连接到路径起点的线条。
- 调用 fill() 可以填充路径（fillStyle 指定的值）。
- 调用 stroke() 对路径进行描边（strokeStyle 指定的值）。
- 调用 clip() 在路径上创建一个剪贴区域。
现在我们绘制一个不带数字的钟：
路径是一种主要的绘图方式，因为它能为要绘制的图形进行更多的控制。
isPointInPath() 接收 x 和 y 坐标作为参数，可以用来判断某一点是否位于路径上。
可以利用路径的 API 绘制出非常复杂的图形。
4 绘制文本
绘制文本 有 fillText() 和 strokeText() 这两个方法，它们可以接收 4 个参数：要绘制的文本字符串、x 坐标、y 坐标和最大像素宽度（可选），它们都有以下这些属性：
| 属性 | 说明 |
|---|---|
| font | 文本样式、大小以及字体（CSS 的字体格式） |
| textAlign | 文本对齐方式，有这些值：start、end、left、right 和 center。建议使用 start（从左到右） 和 end（从右到左）。 |
| textBaseline | 文本的基线，有这些值：top、hanging、middle、alphabetic、ideographic 和 bottom。 |
这些属性都有默认值。fillText() 使用 fillStyle 来绘制文本，strokeText() 使用 strokeStyle 来为文本描边。fillText() 的频率会更多，因为它模仿了在网页中显示的文本方式。现在我们在之前的钟上绘制数字：
//绘制文本
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
如果把 textAlign 设置为 start，表示 x 坐标是在文本左端的位置；如果设置为 end，则表示 x 坐标是在文本右端的位置：
/**
* 绘制文本
*/
//正常
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
//起点对齐
context.textAlign="start";
context.fillText("12",100,40);
//终点对齐
context.textAlign="end";
context.fillText("12",100,60);
meansureText() 可以确定文本的大小，它接受一个参数，即要绘制的文本，它会返回 TextMetrics 对象。这个对象有一个 width 属性。
meansureText() 会根据 font、textAlign 和 textBaseline 的值来计算指定文本的合适大小：
5 变换
通过变换，可以把变换后的图像绘制到画布上。创建绘制上下文时，会以默认值初始化变换矩阵。有这些方法：
| 方法 | 说明 |
|---|---|
| rotate(angle) | 围绕原点旋转图像 angle 弧度。 |
| scale(scaleX, scaleY) | 缩放图像，x 方向上乘以 scaleX，y 方向上乘以 scaleY。参数的默认值都是 1.0。 |
| translate(x, y) | 坐标原点（0,0）移动到(x,y)。 |
| setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy) | 将矩阵重置为默认状态，然后再调用 transform()。 |
| transform(m1_1, m1_2, m2_1, m2_2, dx, dy) | 修改变换矩阵，即乘上底下这样的矩阵： |
现在我们把原点变换到表盘的中心，然后再绘制表针，这样在同一方向上绘制线条就变成了一个简单的数学问题咯（因为所有的的计算都是基于 (0,0)）：
还可以使用 rotate() 来旋转时钟的表针：
有两种方法可以跟踪状态变化。一个是 save() 方法，它会把当时的所有设置放入一个栈结构。如果想要回到之前的设置，可以调用另一个方法 restore() ,它会恢复之前的状态（在栈结构中返回一级）。多次调用 save() 会把多个设置都保存到栈结构中，如果这时再连续调用 restore() 方法，则会一级一级地返回设置：
注意：save() 只会保存绘图上下文的设置和变换，但不会保存绘图上下文的内容。
6 绘制图像
使用 drawImage() 可以把图像绘制到画布中。可以传入 HTML 的
还可以传入另一个 元素作为 drawImage() 方法的第一个参数，这样就可以把另一个画布内容绘制到当前的画布上。
drawImage() 的操作结果可以通过 toDataURL() 得到，但这个图像不能来自其他域。还有，这个 toDataURL() 是 Canvas 对象上的方法！
7 阴影
有这些方法可以为形状或路径绘制阴影：
| 方法 | 说明 |
|---|---|
| shadowColor | 阴影颜色，CSS 的颜色格式，默认为黑色。 |
| shadowOffsetX | 形状或路径 x 轴方向上的阴影偏移量，默认为 0。 |
| shadowOffsetY | 形状或路径 y 轴方向上的阴影偏移量，默认为 0。 |
| shadowBlur | 模糊的像素数，默认为0，即不模糊。 |
它们都可以通过 context 对象进行修改，只要在绘制前为它们设置值，就能生成阴影：
8 渐变
使用 CanvasGradient 实例可以创建一个新的线性渐变，然后调用 createLinearGradient() ，它接收 4 个参数：起点的 x、y 坐标、终点的 x、y 坐标，它会创建一个指定大小的渐变，然后返回 CanvasGradient 实例。
创建渐变对象后，可以使用 addColorStop() 来指定色标。它接受 2 个参数：色标的位置（0 ~ 1）以及 CSS 颜色值。接着可以把 fillStyle 或 strokeStyle 设置为这个对象，使用渐变来绘制形状或者描边：
如果渐变矩形没有绘制到恰当的位置，那就只会显示部分渐变效果：
...
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(50, 50, 50, 50);
...
所以要确保渐变一定要与形状对齐，因此可以可以使用函数来确定坐标处于合适的位置：
createRectLinearGradient() 函数是基于起点的 x 和 y 坐标以及宽度和高度来创建渐变对象的，这样就可以在 fillRect() 中使用相同的值。
createRadialGradient() 可以创建径向渐变，即放射渐变。它接受 6 个参数：对应两个圆的圆心和半径，即起点圆的圆心（x、y）和半径，以及终点圆的圆心（x、y）和半径。
如果要从某个形状的中心点创建一个向外扩散的径向渐变，就必须把这两个圆定义为同心圆：
9 模式
模式就是重复的图像，可以利用模式来填充或者描边图形。createPattern() 会创建一个模式，它接受 2 个参数：一个 HTML 的
createPattern() 的第一个参数也可以是 元素或者是 元素。
10 使用图像数据
使用 getImageData() 可以取得原始的图像数据。它接受 4 个参数：图像区域的 x、y 坐标以及该区域的像素高度与宽度。它返回 ImageData 实例。
ImageData 实例有三个属性：width、height 和 data。data 是数组，它保存着图像中每一个像素的数据。每一个像素的数据包含 4 个元素它们是红、绿、蓝和透明度值。这些值都介于 0 到 255 之间。
可以修改图像的数据，创建一个简单的灰阶过滤器：
注意上面的代码必须运行于 web 服务器（如果是 chrome），而且只对 gif 图像有效！
** 注意：** 只有在画布中的图像都是来源于同一个域时，才可以取得图像数据！否则会报 JavaScript 错误。
11 合成
globalAlpha 属性可以指定透明度，它的值介于 0 到 1，默认是 0.如果所有后续的操作都要基于同样的透明度，那就可以先设置 globalAlpha 属性，然后再绘制，最后再设置为默认值：
globalCompositionOperation 属性用于指定后绘制的图形与新绘制的图形的结合方式，值是字符串，有这些：
| 属性值 | 说明 |
|---|---|
| source-over | 后绘制的图形在先绘制的图形的上方，默认。 |
| source-in | 后绘制的图形与先绘制的图形重叠的部分可见，其他部分透明。 |
| source-out | 后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形透明。 |
| source-atop | 后绘制的图形与先绘制的图形重叠的部分可见，先绘制的图形不受影响。 |
| destination-over | 后绘制的图形在先绘制的图形的下方，只有先绘制的图形的透明下的部分才可见。 |
| destination-in | 后绘制的图形在先绘制的图形的下方，不重叠的部分透明。 |
| destination-out | 后绘制的图形擦除先绘制图形的重叠部分。 |
| destination-atop | 后绘制的图形在先绘制的图形的下方，不重叠的部分，先绘制的图形透明。 |
| lighter | 后绘制的图形与先绘制的图形的重叠部分值相加，即变亮。 |
| copy | 后绘制的图形完全代替先绘制的图形的重叠部分。 |
| xor | 后绘制的图形与先绘制的图形在重叠部分执行“异或”操作。 |
使用 globalCompositionOperation 属性时，请一定要多测试一些浏览器，因为不同的浏览器可能在实现这个属性时存在较大的差异！