[canvas] api
requestAnimationFrame
window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。
如果想得到连贯的逐帧动画，函数中必须重新调用 requestAnimationFrame()。
requestID = window.requestAnimationFrame(callback); // Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback); // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Older versions Chrome/Webkit
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
fill
fill() 方法填充当前的图像（路径）。默认颜色是黑色。
使用 fillStyle 属性来填充另一种颜色/渐变。
如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，
以关闭该路径，然后填充该路径。
多用于填充。
context.fill()
stroke
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
使用 strokeStyle 属性来绘制另一种颜色/渐变。
多用于画线。
context.stroke()
fillStyle
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
context.fillStyle=color|gradient|pattern
color 指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于填充绘图的 pattern 对象
strokeStyle
strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
默认值： #000000
context.strokeStyle=color|gradient|pattern
color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于创建 pattern 笔触的 pattern 对象
rect
rect() 方法创建矩形。
使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
context.rect(x,y,width,height)
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度，以像素计
height 矩形的高度，以像素计
fillRect
相当于整合了 rect() 与 fill()
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
context.fillRect(x,y,width,height)
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度，以像素计
height 矩形的高度，以像素计
clearRect
clearRect() 方法清空给定矩形内的指定像素。
context.clearRect(x,y,width,height);
x 要清除的矩形左上角的 x 坐标。
y 要清除的矩形左上角的 y 坐标。
width 要清除的矩形的宽度，以像素计。
height 要清除的矩形的高度，以像素计。
moveTo
改变起始点位置
使用 stroke() 方法在画布上绘制确切的路径。
context.moveTo(x,y)
x 路径的目标位置的 x 坐标
y 路径的目标位置的 y 坐标
lineTo
lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
使用 stroke() 方法在画布上绘制确切的路径。
context.lineTo(x,y)
x 路径的目标位置的 x 坐标
y 路径的目标位置的 x 坐标
beginPath
beginPath() 方法开始一条路径，或重置当前的路径。
使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
使用 stroke() 方法在画布上绘制确切的路径。
context.beginPath()
closePath
closePath() 方法创建从当前点到开始点的路径。
使用 stroke() 方法在画布上绘制确切的路径。
使用 fill() 方法来填充图像（默认是黑色）。
使用 fillStyle 属性来填充另一个颜色/渐变。
context.closePath()
arc
周长：C=2πr
面积：S=πr²
半圆周长：C=πr+2r
半圆面积：S=πr²/2
1π为180度
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
如需通过 arc() 来创建圆，把起始角设置为 0，结束角设置为 2*Math.PI。
使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
arc(100,75,50,0Math.PI,1.5Math.PI)
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。默认顺时针。False = 顺时针，true = 逆时针。
createLinearGradient
createLinearGradient() 方法创建线性的渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
使用该对象作为 strokeStyle 或 fillStyle 属性的值。
使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
context.createLinearGradient(x0,y0,x1,y1);
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
ctx.createLinearGradient(0,0,0,170)//从上到下
ctx.createLinearGradient(0,0,170,0)//从左到右
addColorStop
addColorStop() 方法规定 gradient 对象中的颜色和位置。
addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。
可以多次调用 addColorStop() 方法来改变渐变。
如果不对 gradient 对象使用该方法，那么渐变将不可见。
为了获得可见的渐变，需要创建至少一个色标。
gradient.addColorStop(stop,color);
stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值
drawImage
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
在画布上定位图像：
context.drawImage(img,x,y);
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）
需要onload
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image()
img.src = "./fafa.jpg"
//var img = document.getElementById("pic");
img.onload = function () {
ctx.drawImage(img, 0, 0, 100, 100, 0, 0, 200, 200);
}
c.addEventListener('click', function () {
ctx.drawImage(img, 0, 0, 200, 100);
})
lineWidth
lineWidth 属性设置或返回当前线条的宽度，以像素计。
context.lineWidth=number;
number 当前线条的宽度，以像素计。
font
font 属性设置或返回画布上文本内容的当前字体属性。
font 属性使用的语法与 CSS font 属性 相同。
默认值： 10px sans-serif
context.font="italic small-caps bold 12px arial"
fillText
fillText() 方法在画布上绘制填色的文本。
文本的默认颜色是黑色。
使用font属性来定义字体和字号，并使用fillStyle属性以另一种颜色/渐变来渲染文本。
context.fillText(text,x,y,maxWidth)
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。
strokeText
strokeText() 方法在画布上绘制文本（无填充色）。
文本的默认颜色是黑色。
使用font属性来定义字体和字号，并使用strokeStyle属性以另一种颜色/渐变来渲染文本。
context.strokeText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。
save
save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法。
ctx.save()
保存到栈中的绘制状态有下面部分组成：
当前的变换矩阵。
当前的剪切区域。
当前的虚线列表.
restore
restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，
将 canvas 恢复到最近的保存状态的方法。 如果没有保存状态，此方法不做任何改变。
主要是为了再次绘制时，不受到之前绘制的影响。
void ctx.restore();
getImageData
CanvasRenderingContext2D.getImageData() 返回一个ImageData对象，用来描述canvas区域隐含的像素数据
ImageData ctx.getImageData(sx, sy, sw, sh);
sx
将要被提取的图像数据矩形区域的左上角 x 坐标。
sy
将要被提取的图像数据矩形区域的左上角 y 坐标。
sw
将要被提取的图像数据矩形区域的宽度。
sh
将要被提取的图像数据矩形区域的高度。
tip：
在随机生成的无规则线路中，可以通过获取颜色判断是否在区域内。
clip
CanvasRenderingContext2D.clip() 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。
ctx.clip();
ctx.clip(fillRule);
ctx.clip(path, fillRule);
fillRule
这个算法判断一个点是在路径内还是在路径外。
允许的值：
- "nonzero": 非零环绕原则，默认的原则。
- "evenodd": 奇偶环绕原则。
path
需要剪切的 Path2D 路径。
