- getContext('2d')：
- 获得当前画布的绘制环境，目前唯一合法值“2d”，它返回一个对象，携带所有绘图API；rect(x, y, width, height)：绘制矩形
-
ctx.rect(20,20,150,100)：x：矩形左上角的x坐标y：矩形左上角的Y坐标width：矩形的宽度，以px计height：矩形的高度，以px计
-
arc(x, y, r, s, e, counterclockwise)：绘制圆
- ctx.arc(100,75,50,0,2*Math.PI)
x：圆的中心的x坐标y：圆的中心的y的坐标r：圆的半径sAngle：起始角，以弧度计（弧的圆形的三点钟位置是0度）eAngle：结束角，以弧度计counterclockwise：可选，规定应该逆时针还是顺时针绘图，false=顺时针，true=逆时针
- ctx.arc(100,75,50,0,2*Math.PI)
- strokeStyle：属性设置或返回用于笔触的颜色、渐变或模式
context.strokeStyle=color|gradient|patternctx.strokeStyle = 'blue'
- stroke()：实际地绘制出通过moveTo()和lineTo()方法定义的路径，默认颜色是黑色
ctx.stroke()提示：请使用strokeStyle属性来绘制另一种颜色/渐变
- lineWidth：属性设置或返回当前线条的宽度，以像素计
ctx.lineWidth = 10ctx.lineWidth = number
- fill()：方法填充当前的图像（路径），默认颜色是黑色
ctx.fill()提示：请使用fillStyle属性来填充另一种颜色/渐变
- fillStyle:设置填充绘图的颜色、渐变或模式（类似于strokeStyle）
context.fillStyle=color|gradient|patternctx.fillStyle = '#00f'
- fillRect(x, y, width, height)：绘制‘已填色’的矩形，默认的填充颜色是黑色
ctx.fillRect(20,20,150,100)x：矩形左上角的x坐标y：矩形左上角的Y坐标width：矩形的宽度，以px计height：矩形的高度，以px计提示：请使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式
- beginPath()：开始一条路径，或重置当前的路径
ctx.beginPath()提示：请使用这些方法来创建路径moveTo()、lineTo()、quadricCurveTo()/bezierCurveTo()、arcTo()、arc()请使用stroke()方法在画布上绘制确切的路径
- moveTo(x, y)：将起始点移到某位置开始画图
moveTo(0, 0)x：路径的起始位置的x坐标y：路径的起始位置的y坐标
- lineTo(x, y)：方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
lineTo(300, 300)x：路径的目标(结束)位置的x坐标y：路径的目标(结束)位置的y坐标提示：请使用stroke()方法在画布上绘制确切的路径常和moveTo配合使用，一个为起始点，一个为结束点，且lineTo可以有多个
- font：属性设置或返回画布上文本内容的当前字体属性
ctx.font = 'italic small-caps bold 12px arial'提示：同css的font属性相同，都有font-style、font-family等
- fillText(text, x, y, maxWidth)：方法在画布上绘制填色的文本，文本的默认颜色是黑色
ctx.fillText('w3school.com.cn', 10, 90)text：规定在画布上输出的文本x：开始绘制文本的x坐标位置（相对于画布）Y：开始绘制文本的y坐标位置（相对于画布）maxWidth：可选，允许的最大文本宽度，以像素计提示：请使用font属性来定义字体和字号，并使用fillStyle属性以另一种颜色/渐变来渲染文本
- strokeText(text, x, y, maxWidth)：在画布上绘制文本（没有填色），文本默认颜色是黑色
ctx.strokeText('w3school.com.cn', 10, 90)text：规定在画布上输出的文本x：开始绘制文本的x坐标位置（相对于画布）Y：开始绘制文本的y坐标位置（相对于画布）maxWidth：可选，允许的最大文本宽度，以像素计提示：请使用font属性来定义字体和字号，并使用strokeText属性以另一种颜色/渐变来渲染文本
- createLinearGradient(x, y, x1, y1)：创建线性渐变，渐变可用于填充矩形、圆形、线条、文本等
var grd = ctx.createLinearGradient(0, 0, 170, 0)x：渐变开始点的x坐标y：渐变开始点的Y坐标x1：渐变结束点的x坐标y1：渐变结束点的Y坐标提示: 1、必须使用至少两种停止颜色2、请使用该对象作为strokeStyle或fillStyle属性的值3、请使用addColorStop()方法规定不同颜色、以及在gradient对象中的何处定位颜色
- createRadialGradient(x, y, r, x1, y1, r1)：创建径向渐变，渐变可用于填充矩形、圆形、线条、文本等
var grd = ctx.createRadialGradient(0, 0, 170, 0)x：渐变开始圆的x坐标y：渐变开始圆的Y坐标r：开始圆的半径x1：渐变结束圆的x坐标y1：渐变结束圆的Y坐标r1:结束圆的半径提示: 1、必须使用至少两种停止颜色2、请使用该对象作为strokeStyle或fillStyle属性的值3、请使用addColorStop()方法规定不同颜色、以及在gradient对象中的何处定位颜色
- addColorStop(stop, color)：规定gradient对象中的颜色和位置，此方法与createLinearGradient()或createRadialGradient()一起使用
grd.addColorStop(0, 'black'); grd.addColorStop(1, 'white');stop：介于0.0与1.0之间的值，表示渐变中开始与结束之间的位置color：在结束位置显示的css颜色提示：可以多次调用addColorStop()方法来改变渐变，如果不对gradient对象使用该方法，那么渐变将不可见，为了获得可见的渐变，需要创建至少一个色标
- drawImage(img, sx, sy, swidth, sheight, x, y, width, height)：在画布上绘制图像、画布或视频，也可以绘制某些部分，以及增加或减少图像的尺寸
img：规定要使用的图像、画布或视频sx：可选，开始剪切的x坐标位置sy：可选，开始剪切的y坐标位置swidth：可选，被剪切图像的widthsheight：可选，被剪切图像的高度x：在画布上放置图像的x坐标位置y：在画布上放置图像的y坐标位置width：可选，要使用的图像的宽度（伸展或缩小图像）height：可选，要使用的图像的高度（伸展或缩小图像）
-
rect(), strokeRect() 和 fillRect() 的区别：fillRect()与strokeRect()在调用后会立即在画布上画出效果，而rect()不会立即将图形画出，只有在调用了stroke()方法之后，才会实际作用于画布。
- measureText（）方法：
- 在画布上输出文本之前，检查字体的宽度；
- 定义和用法：
- measureText（）方法返回包含一个对象，该对象包含以像素计的制定字体宽度；如果需要在文本向画布输出之前，就了解文本的宽度，就可以使用此方法；
- context.measureText（text）.width：text是要测量的文本；
- eg：
- var c = document.getElementById('myCanvas')
- var ctx = c.getContext('2d')
- ctx.font = '30px Arial'
- var txt = 'Hello World'
- ctx.fillText('' + ctx.measureText(txt).width, 10, 50)
- ctx.fillText(txt, 10, 100)
注意：如果要使用jQuery去写canvas：jQuery返回的是jQuery对象，而jQuery对象是没有getContext方法的，需要把jQuery对象那个转换成DOM对象。其实jQuery对象就是类数组，用数组下标可以取得DOM对象（方法：$('#myCanvas')[0]）