<canvas id='canvas'></canvas>
获取canvas对象上下文
var convas=document.getElementById('canvas');
var context=canvas.getContext('2d');canvas是基于状态的绘图环境
画直线
context.moveTo(x,y); 挪到笔头 context.lineTo(x,y);按着画笔移动 （可以结合使用moveTo画不相连的线段）moveTo lineTo +moveTo lineTo context.lineWith=10; canvas是基于状态的，它不会创建一个直线对象。我们是对canvas上下文进行其他设置。读完所以设置后再绘图 context.strokeStyle='red'; 这里还有其他的样式，不仅仅只有颜色。 context.stroke(); context.beginPath(); 开始一个全新的canvas状态。之前对context的设置不会因为beginPath()而改变。新的设置会覆盖之前的设置 context.closePath(); 使用线段绘制封闭的图形。可以去掉最后一个lineTo。closePath()会完成封闭这个动作。 context.fillStyle='green'; context.fill(); 建议在进行完所有的设置之后再fill和stroke。不然fill会覆盖一部分的线段宽度，会由10变成5;
可以通过以上方法进行封装各种图形的函数。当然canvas也提供了很多图形api
context.rect(x,y,width,height);绘制矩形的路径 context.fillRect(x,y,width,height);使用当前fillStyle绘制矩形 ( 颜色值可以使用css认同的所有颜色值包括rgb、rgba、hsl、hsla) context.strokeRect(x,y,width,height);使用当前的strokeStyle绘制矩形
后面绘制的图形如果与之前的图形有重叠，则后者会覆盖前者。
但是如果fillStyle 或者strokeStyle的颜色值有一定的透明度，则被覆盖的部分还是有一部分显示的。当然也有其他对重叠部分的设置
线条属性：
lineWidth=10; lineCap=''; 线段的2段的样式。butt(default)、round圆头、square方头。round和squqre比默认的长线条宽度的一半（5）的的长度。 lineJoin;线段与线段之间连接的样式。miter(default)、bevel(斜截)、round(圆头)
图形变换
context.translate(x,y);移动坐标系 context.rotate(deg);旋转坐标系弧度制 context.scale(x,y);缩放坐标系--->需要注意的是，它也会对坐标数值，边框宽度属性等进行缩放，使用时需要谨慎选择。
提示：在进行一次变换之后，坐标系已经发生变化，如果在使用变换，就会与之前预期不同。那么我们就需要将之前的变换再逆向执行一次，如context.translate(100,200)之后，如果还需要进行rotate变换，就需要再进行一次context.translate(-100,-200)操作。这样操作就会很麻烦，canvas提供了一个简单的方法来保存变换之前的canvas状态。如下
context.save(); context.translate(x,y); context.restore();
在变换之前进行save操作，变换完成之后再restore操作，就可以还原到之前的canvas状态，避免第一的变换影响到第二次的变换。
变换矩阵---canvas为变换提供了一个更高级的方法。
contex.transform(a,b,c,d,e,f); a、d-水平垂直缩放；b、c水平垂直倾斜；e、f水平垂直位移。 context.transform(1,0,0,1,0,0);基本矩阵，图形不发生任何变化。 当我们进行多次transform矩阵之后，标准系以及很混乱了，就需要下面这个方法了。 context.setTransform(a,b,e,d,e,f)。覆盖之前的transform设置，使用当前的transform设置，这样我们就很清楚当前具体transform变换。 context.fillStyle ---填充样式 之 渐变 linearGradient: var grd=context.creatLinearGradient(xStart,yStrart,xEnd,yEnd); 定义渐变色。在（xEnd,yEnd）点之后，填充的是最后的颜色值。 grd.addColorStop(stop,color);(stop的值，0-1的浮点数) 一般多个颜色断点配合使用，从而实现多颜色的渐变 context.fillStyle=grd; context.fill(); radialGradient; var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1); 定义2个同心圆，（x0,y0）位置的半径r0 gra.addColorStop(stop,color); context.fillStyle=grd; context.fill(); createPattern var pattern=context.createPattern(img || canvas || video , repeat-style); Img的值可以使一张图片，也可以使一个canvas画布，甚至是一段video repeat-style的值：no-repeat、repeat-x、repeat-y、repeat context.fillStyle=pattern; context.fill();
注：以上说明了fillStyle的值：color、gradient、img、canvas、video。当然，以上的style值也是适用strokeStyle。
绘制一段弧---arc
context.arc(centerX , centerY , radius , startAngle , endAngle , anticlockwise=false)，
这些参数分别代表是中心坐标，半径，开始结束弧度，及是否逆时针（默认false）
可以封装一些方法来画圆形，圆线，圆角矩形等。
contex.arcTo(x1 , y1 , x2 , y2 , radius);
当前点（x0,y0）与(x1,y1)和（x2，y2）这三点组合成一个角，分别切于2边的弧就是arcTo绘制的效果。起点是当前点，结束点（x2,y2）,当然这是一段直线+圆弧的效果，radius为圆弧的半径。如下图所示。
适用情景：一般画圆弧是需要圆心坐标的。使用arcTo我们可以在不清楚圆心坐标的情况下绘制一段弧。
插入一段：
我们在使用canvas封装一些画图形的函数时，一般步骤为先使用ctx.save()和ctx.restore()包裹函数的开始和结束。在其中做一些style的设置、变换的设置、及一个绘制图形路径的函数。在这个路径函数中以ctx.beginPath()和ctx.closePath()开始和结束，在其中使用一些moveTo，lineTo，arc，arcTo等方法。
二次贝塞尔曲线quadraticCurveTo(x1，y1，x2，y2);------http://tinyurl.com/html5quadratic
ctx.moveTo(x0,y0); ctx.quadraticCurveTo(x1，y1，x2，y2);
这样就绘制一段以（x0,y0）为起点，（x2,y2）为终点的一段弧。 那么这样的一段弧，不一定是一段圆弧。
三次贝塞尔曲线bezierCurveTo(x1，y1，x2，y2，x3，y3)-----http://tinyurl.com/html5bezier
ctx.moveTo(x0,y0); ctx.bezierCurveTo(x1，y1，x2，y2，x3，y3)
这样就绘制一段以（x0,y0）为起点，（x3,y3）为终点的一段弧。 这么一段弧度可以绘制二次曲线不能完成的波浪弧线。
canvas中文字的绘制
ctx.font = "bold 40px Arial"; ctx.fillStyle=; ctx.fillText(string ，x ，y，[maxlen]);在（x,y）位置绘制string 这个字符串 ctx.strokeStyle=; ctx.strokeText(string，x，y，[maxlen]);在（x，y）位置绘制string 这个字符串，这个文字只有文字的边框，并没有填充
string 这个字符串如果设置了maxlen这个可选参数，那么这段文字就会强制压缩在maxlen这个宽度中。