<canvas>元素是HTML5中的绘图元素，通过定义一个画布区域，然后使用javascript动态地在这个区域里面绘制图形，对于2D和3D图形都可以绘制，我们将其分成2D上下文和WebGL两大块内容来一起来学习，但是WebGL觉得比较少用到，而且难，所以不讲了！
一、了解canvas
<canvas id=‘draw’ width=‘200’ height=‘200' > nothing </canvas>，这是便是一个基本canvas元素的写法了，但是我们必须通过javascript来动态获得，那么需要这样：

1 var draw = document.getElementById(‘draw’); (draw.getContext){ context = draw.getContext(‘2d’); imageuri = draw.toDataURL(‘image/png’); 8 var img = document.createElement(‘img’); 9 img.src= imageuri; 10 document.body.appendChild(img); 11 }

二、2D上下文
对于2D上下文的坐标是开始于canvas元素的左上角的，原点的坐标为(0，0)，x轴越往右越大，y轴越往下越大就算但画布的原坐标发生translate也不例外，如下图：

填充（使用指定样式［颜色、渐变、图像、模式等］填充图形）和描边（图形的边缘画线）分别为fillStyle和strokeStyle，需要注意一点，fillStyle和strokeStyle会被延用至重新设置这两个值！

1 var draw = document.getElementById(‘draw’); 2 if(draw.getContext){ 3 var context = draw.getContext(‘2d’); 4 context.strokeStyle = “#000”; 5 context.fillStyle = ‘#0000ff’; 6 }

绘制矩形，有以下方法fillRect()、strokeRect()、clearRect()的方法，都是一样的，传入四个参数，矩形的x坐标、矩形的y坐标、矩形的宽度width、矩形的高度height，

1 var draw = document.getElementById(‘draw’); 2 if(draw.getContext){ context = draw.getContext(‘2d’); context.strokeStyle = “#000”; 7 context.strokeRect(10,10,50,50); context.strokeStyle = “#000”; 10 context.fillRect(30,30,50,50); context.clearRect(40,40,10,10); context.fillStyle = ‘#0000ff’; 17 context.fillRect(30,30,50,50); 18 19 }

绘制路径，2d上下文有很多在画布上绘制路径的方法，可以创造出复杂的形状和线条。要绘制路径，首先需要调用beginPath()方法，
arc(x,y,radius,startAngle,endAngle,counterclockwise)，意思是以(x,y)为圆心，radius为半径，counterclockwise的值为false的时候顺时针画圆（或圆弧），开始角度startAngle，结束角度endAngle，用弧度表示；
arcTo(x1,y1,x,y,radius)，意思是从(x1,y1)到(x,y)，以radius为半径，画一条弧线；
lineTo(x,y)，意思是从上一个点画一条直线至(x,y)；
moveTo(x,y)，意思是将绘图的游标移至(x,y)，也就是从此点开始绘制；
rect(x,y,width,height)，这是画个矩形，就不多说了；
bezierCurveTo(x1,y1,x2,y2,x,y)，意思从上一个点开始，是以(x1,y1)、(x2,y2)为控制点，(x,y)为终点的三次贝尔塞曲线；

quadraticCurveTo(cx,cy,x,y)，意思是从上一个点开始，是以(cx,cy)为控制点，(x,y)为终点的二次贝尔塞曲线。

那么接下来，创建路径之后，我们可以又怎么这几种选择：

使用closePath()，关闭路径，绘制一条连接至起点的线条；

使用fill()、stroke()，对路径进行填充或是描边，前提是设置了（fillStyle、strokeStyle）

使用clip()，创建一个剪切区域

如果我们想在路径关闭之前，判断某个点是否在路径上，可以这样来做

if(context.isPointInPath(100,100)){ alert(); }

 绘制文本，有图，就有文本，主要有两个方法，fillText()和strokeText(),传入四个参数，str（字符串）、x坐标、y坐标、最大像素宽度(超过此值，将会自动收缩)，当然这两个方法是以以下三个属性（font、textAlign、textBaseline）为基础的，当然要注意，这两个方法也是使用fillStyle和strokeStyle来做填充和描边滴，之后也有demo更新到github上面去!