要在画布（canvas）上绘图，需要取得绘图上下文，调用getContext()方法并传入上下文的名字，传入"2d"就可以取得2D上下文对象

var drawing = document.getElementById('drawing')
if (drawing.getContext) {
  var ctx = drawing.getContext('2d')
}

使用toDataURL()方法可以导出在<canvas>元素上绘制的图像，这个方法接受一个参数，即图像的MIME类型

var drawing = document.getElementById('drawing')
if (drawing.getContext) {
  var imgURL = drawing.toDataURL('image/png')
  var image = new Image
  image.src = imgURL
  document.appendChild(image)
}

如果绘制到画布上的图像源自不同的域，toDataURL()方法会抛出错误

2D上下文

2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0, 0)，x值越大表示越靠右，y值越大表示越靠下，width和height表示最右和最下

填充和描边

2D上下文的两种基本绘图操作是填充和描边，操作的结果取决于两个属性：fillStyle和strokeStyle，这两个属性的值可以是字符串，渐变对象和模式对象，而且他们的默认值都是"#000000"

var drawing = document.getElementById('drawing')
if (drawing.getContext) {
  var ctx = drawing.getContext('2d')
  ctx.strokeStyle = 'red'
  ctx.fillStyle = '#ff0000'
}

绘制矩形

矩形是唯一一种可以直接在2D上下文对象中绘制的形状，fillRect()，strokeRect()和clearRect()，这三个方法都能接收四个参数：x坐标，y坐标，宽度和高度

绘制路径

要绘制路径首先必须调用beginPath()方法，然后再调用下列方法来绘制路径：

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x, y)为圆心绘制一条弧线，半径为radius，起始和结束角度（用弧度表示）分别为startAngle和endAngle，最后一个参数表示是否是逆时针方向

arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线到(x2, y2)为止，并且以给定的半径radius穿过(x1, y1)

bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线到(x, y)为止，并且以(c1x, c1y)和(c2x, c2y)为控制点

lineTo(x, y)：从上一点开始绘制一条直线到(x, y)为止

moveTo(x, y)：将绘图游标移动到(x, y)，不画线

quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线到(x, y)为止，并且以(cx, cy)为控制点

rect(x, y, width, height)：从(x, y)开始绘制一个矩形，宽度和高度分别为width和height，这个方法绘制的是矩形路径

创建了路径之后有几种选择，如果想绘制一条连接到路径起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法，另外还可以调用stroke()方法对路径描边，最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。还有一个名为isPointInPath()的方法，这个方法接受x和y坐标作为参数，用于路径被关闭之前确定画布上的某一点是否位于路径上

绘制文本

绘制文本主要有两个方法，fillText()和strokeText()，这两个方法都可以接受4个参数：要绘制的文本字符串，x坐标，y坐标和可选的最大像素宽度，而且这两个方法都以下列3个属性为基础：

font：表示文本样式，大小及字体

textAlign：表示文本对齐方式，可能的值有"start"，"end"，"left"，"right"和"center"，建议使用"start"和"end"，不要使用"left"和"right"

textBaseline：表示文本的基线，可能的值有"top"，"hanging"，"middle"，"alphabetic"，"ideographic"和"bottom"

2D上下文提供了辅助确定文本大小的方法measureText()，这个方法接受一个参数，即要绘制的文本，返回一个TextMetrics对象，返回的对象目前只有一个width属性

变换

rotate(angle)：围绕原点旋转图像angle弧度

scale(scaleX, scaleY)：缩放图像，在x方向乘以scaleX，在y方向乘以scaleY

translate(x, y)：将坐标原点移动到(x, y)

transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改变换矩阵，方式是乘以如下矩阵：

m1_1 m1_2 dx

m2_1 m2_2 dy

0 0 1

(太高端了，我也不懂)

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：将矩阵重置为默认状态，然后再调用transform()

状态跟踪

有两个方法可以追踪上下文的变化，如果你知道将来要返回某组属性和变换的组合，可以调用save()方法，调用这个方法之后，当前的所有设置都会进入一个栈结构，等要回到之前保存的设置时，可以调用restore()方法，连续调用save()可以把更多设置保存到栈结构中，之后再连续调用restore()则可以一级一级地返回

绘制图像

如果想把一幅图像绘制到画布上，可以使用drawImage()方法，可以使用三种不同的参数组合，最简单的方式是传入一个<img>元素，以及绘制该图像的起点x和y坐标，例如：

var img = document.images[0]
ctx.drawImage(img, 10, 10)

绘制到画布上的图像大小与原始大小一样，如果你想改变绘制后图像的大小，可以再多传入两个参数，分别表示宽度和高度：

ctx.drawImage(img, 10, 10, 20, 30)

绘制出来的图像大小会变成20*30像素，还可以把图像中的某个区域绘制到画布中，这时总共需要传入9个参数：要绘制的图像，源图像x坐标，源图像y坐标，源图像宽度，源图像高度，目标图像x坐标，目标图像y坐标，目标图像宽度，目标图像高度

还可以传入另一个<canvas>元素作为其第一个参数，这样，就可以把另一个画布的内容绘制到当前画布上

阴影

2D上下文会根据以下几个属性值，自动为形状或路径绘制出阴影

shadowColor：用css颜色格式表示的阴影颜色，默认为黑色

shadowOffsetX：x轴方向的阴影偏移量

shadowOffsetY：y轴方向的阴影偏移量

shadowBlur：模糊的像素数

渐变

创建线性渐变可以调用createLinearGradient()，这个方法接受4个参数：起点x坐标，起点y坐标，终点x坐标，终点y坐标。创建了渐变对象之后，下一步就是使用addColorStop()方法来指定色标，这个方法接受两个参数：色标位置和css颜色值，色标位置是一个0（开始颜色）到1（结束颜色）之间的数字，例如：

var gradient = ctx.createLinearGradient(30, 30, 70, 70)
gradient.addColorStop(0, 'white')
gradient.addColorStop(1, 'black')

确保渐变与形状对齐非常重要，有时候可以考虑使用函数来确保坐标合适，例如：

function createRectLinearGradient(ctx, x, y, width, height) {
  return ctx.createLinearGradient(x, y, x + width, y + height)
}

创建径向渐变可以使用createRadialGradient()，这个方法接受6个参数，对应着两个圆的圆心和半径。

模式

模式其实就是重复的图像，要创建一个模式，可以调用createPattern()方法并传入两个参数：一个<img>元素和一个表示如何重复的字符串，第二个参数的值与css的background-repeat属性值相同，第一个参数也可以是一个<video>元素或者另一个<canvas>元素

使用图像数据

可以通过getImageData()取得原始图像数据，这个方法接受4个参数：要取得其画面区域的x和y坐标以及该区域的像素宽度和高度，返回的是一个ImageData对象的实例，对象包含3个属性：width，height和data。其中data是一个数组，保存着图像中的每个像素的数据，在data数组中，每个像素用4个元素表示，分别是红，绿，蓝和透明度。数组中的每个元素的值都介于0到255之间（包括0和255）。调用putImageData()方法可以把修改后的imageData对象绘制到画布上，例如：

ctx.putImageData(imageData, 0, 0)

合成

globalAlpha是一个介于0和1之间的值（包括0和1），用于指定所有绘制的透明度。

globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合，这个属性的值是字符串，可能的值如下：

source-over：（默认值）后绘制的图形位于先绘制的图形的上方

source-in：后绘制的图形与先绘制的图形的重叠部分可见，其他部分透明

source-out：后绘制的图形与先绘制的图形的不重叠部分可见，先绘制的图形完全透明

source-atop：后绘制的图形与先绘制的图形的重叠部分可见，先绘制的图形不受影响

destination-over：后绘制的图形位于先绘制的图形的下方，只有之前透明像素下的部分可见

destination-in：后绘制的图形位于先绘制的图形的下方，两者不重叠的部分完全透明

destination-out：后绘制的图形擦除与先绘制的图形重叠的部分

destination-atop：后绘制的图形位于先绘制的图形的下方，在两者不重叠的部分，先绘制的图形透明

lighter：后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮

copy：后绘制的图形完全替代与先绘制图形重叠的部分

xor：后绘制的图形与先绘制的图形重叠部分的值执行异或操作