不可在convas中直接绘图，必须用该方法获得其二维空间绘图上
下文。
☆ context.beginPath()
表示开始新的路径绘制。
☆ context.isPointInPath(x, y)
判断某个点是否在路径上。在坐标系被转换后该方法不适用。
☆ context.moveTo(x,y)
相当于将画笔从画板提起，笔尖离开画板，然后再将笔尖定位在
(x,y)坐标处，在这个新的位置开始新的绘制。
☆ context.lineTo(x, y)
相当于画笔笔尖不离开画板，画笔笔尖从当前坐标位置移动至
(x,y)坐标处，绘制一条线段。
☆ context.stroke()
在convas上绘图后，一些绘制操作必须调用该方法才能让绘制内
容显示。
☆ context.save()
该方法保存convas的当前状态，无论以后对convas坐任何改变，
只要在做这些改变前保存convas状态，以后就可以调用
context.restore()方法恢复到保存的这个状态。通常在一段新绘制
或修改操作前应该保存convas的原始状态（没有进行任何绘制或更改
），每次在一段新绘制或修改操作结束后在将其恢复到原始状态。这
样有利于以后的绘制操作。
实际上，canvas的2d绘图环境context的许多属性和一些方法与状
态有关，每个属性的值被改变（或者使用某些方法改变绘图状态），
绘图状态就改变。若在每次改变后都保存，则一个属性的多个状态会
以栈（stack）的形式保存，可以依照栈的顺序多次调用restore()方
法来回到相应保存的状态。
☆ context.translate(x, y)
该方法将当前坐标原点移动到(x, y)处。
☆ context.restore()
恢复convas状态为上一次保存的状态。
☆ context.closePath()
This command is very similar in behavior to the lineTo
function, with the difference being that the destination is
automatically assumed to be the
origination of the path. However, the closePath also informs
the canvas that the current shape has closed or formed a
completely contained area. This will be useful for future
fills and strokes.
At this point, you are free to continue with more
segments in your path to create additional subpaths. Or you
can beginPath at any time to start over and clear the path
list entirely.
☆ context.fill();
在设置填充样式后填充闭合路径。调用该方法后不必再调用
context.stroke()方法。
☆ context.fillRect(x, y, width, height)
在(x, y)处绘制并填充宽和长为(width, height)的矩形区域。调
用该方法后不必再调用context.stroke()方法。
☆ context.strokeRect(x, y, width, height)
在(x, y)处绘制宽和长为(width, height)的矩形轮廓。
☆ context.clearRect(x, y, width, height)
清理位置（矩形的左上角）在(x, y,)，大小为(width, height)
的矩形区域。
Remove any content from the rectangular area and reset it
to its original, transparent color.
The ability to clear rectangles in the canvas is core to
creating animations and games using the HTML5 Canvas API. By
repeatedly drawing and clearing sections of the canvas, it
is possible to present the illusion of animation, and many
examples of this already exist on the Web. However, to
create animations that perform smoothly, you will need to
utilize clipping features and perhaps even a secondary
buffered canvas to minimize the flickering caused by
frequent canvas clears.
☆ context.drawImage( )
该方法有三个重载，可将图像绘制在canvas上。图像来源可以是
页面中的img标记、JS中的image对象和video的一帧。
•context.drawImage(img, x, y)
在(x, y)处用图像img绘制图像。当canvas的大小大于图像时
，整个图像被绘制；当图像大于canvas时，多余的部分被裁剪。
•context.drawImage(img, x, y, w, h)
在(x, y)处用图像img绘制长和宽为(w, h)的矩形区域。图像
的大小将改变为(w, h)。
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy,
cw, ch)
将一个img图像作为绘制对象，裁剪img上位置为（imgx, imgy
）大小为（imgw, imgh）的区域，绘制在canvas内位置为（cx, cy）
处绘制大小为（cw, ch）的区域。
如果图像上裁剪区域超出了图像范围，则会引发异常。
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
将一个video对象作为绘制对象，抓取video上位置为（vx, vy
）大小为（vw, vh）的一帧，在canvas上位置为（cx, cy）处绘制大
小为（cw, ch）的区域。
此外，drawImage()的第一个参数也可以是另一个 canvas。
☆ context.getImageData(x, y, width, height)
该方法从canvas内位置为(x, y)处，获得大小（width, height)
一块像素区域，返回值为一个ImageData对象。ImageData有width，
height和data三个属性。
data属性是一个像素数组，数组中每连续的四个元素代表一个像
素，四个连续元素依次含有RGBA的颜色与透明度信息。四个连续的元
素必须属于一个像素，第一个元素的位置不是随意取的。
像素数组是按照从上到下，从左到右的顺序在canvas中指定区域
扫描获取。像素数组的元素个数为width * height * 4。要获得特定
位置的像素信息。
使用了该方法的Web页面若用浏览器以本地文件方式打开不会正常
工作，通常会产生安全错误（security error）。可以将文件上传至
Web服务器，然后请求访问解决此问题。并且，涉及到的图像，JS和
HTML必须是来自同一个域名。不过，IE9可以通过本地文件访问。
一个例子如下：
var width = imageData.width;
//特定像素在像素区域的位置
var x = 2;
var y = 2;
//绿颜色在像素数组中对应元素的索引
var pixelRedindex = ((y-1)*(width*4))+((x-1)*4);
var pixelGreenindex = pixelRedindex + 1;
var pixelBlueindex = pixelRedindex + 2;
var pixelAlphaindex = pixelRedindex + 3;
var pixel = imageData.data; // CanvasPixelArray
var red = pixel[pixelRedindex];
var green = pixel[pixelGreenindex];
var blue = pixel[pixelBlueindex];
var alpha = pixel[pixelAlphaindex];
☆ context.createImageData(w, h)
产生一个大小为(w, h)的ImageData对象，ImageData对象的意义
同getImageData()所获取的ImageData对象。
☆ context.putImageData(ImageData, x, y, x1, y1, w, h)
将一个ImageData对象绘制到canvas上(x, y)处。后四个参数是可
选参数，用于设定一个裁剪矩形的位置和大小。
☆ context.createLinearGradient(x1, y1, x2, y2)
在(x1, y1)和(x2, y2)之间产生线性渐变。如：
☆ Gradient.addColorStop(offset, color)
用于渐变中，在不同的位置设置渐变颜色。 The color argument
is the color you want to be applied in the stroke or fill at
the offset position. The offset position is a value between
0.0 and 1.0, representing how far along the gradient line
the color should be reached. 如：
gradientName.addColorStop(1, '#552200');
其中color可用CSS中的rgba(r,g,b,a)函数来产生透明渐变，如：
☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)
在两个圆之间产生放射渐变区域。The first three arguments
represent a circle centered at (x0, y0) with radius r0, and
the last three arguments represent a second circle centered
at (x1, y1) with radius r1. The gradient is drawn across the
area between the two circles.
☆ context.createPattern(img, 'repeatPattern')
用一个图像img产生重复类型为repeatPattern的某路径的
strokeStyle样式或填充的fillStyle样式。repeatPattern的值可以
取repeat、repeat-x、repeat-y和no-repeat之一。如：
参数 img 也可以是另一个 canvas 或 video
☆ context.scale(xMultiple, yMultiple)
两个参数分别指定对象在x和y方向上以后的绘制缩放倍数，大于1
为放大，0和1之间为缩小。若为负值，则可以实现倒影、翻转等效果
。
☆ context.rotate(angle)
用于旋转绘图环境context，以当前坐标原点为按转中心，以弧度
为单位，结合使用Math.PI。参数 angle 为正值时为顺时针旋转，为
负值时按逆时针