HTML5中新增了一个canvas元素，可以通过JavaScript动态的在这个元素上进行绘图。除了基本的绘制2D图形，canvas还提供了名为webGL的3D上下文。
一、基本用法：
<canvas width="200" height="200" id="testcanvas"> </canvas>
1）使用canvas必须得设置元素的width和height，不然元素不能显示 。可以通过css动态的为canvas元素设置样式。
2）用canvas绘图，通过getContext()取得上下文对象的引用。
3）用toDataURL()方法可导出在canvas元素上绘制的图片，toDataURL()方法接受一个MIME类型格式参数。
var draw = document.getElementById("testcanvas"); if (draw.getContext) { var context = draw.getContext("2d"); var imgURL = drwa.toDataURL("image/png"); var img = new Image(imgURL); img.src = imgURL document.body.appendChild(img); }
二、2D上下文
2D绘图上下文可以绘制2D图形，如矩形，弧线和路径等。提供的方法可以填充图形和描边，绘制基本的矩形，绘制路径，文本等。
1、填充和描边
2D上下文2中基本绘图操作是填充和描边，使用context的fillStyle和strokeStyle。
2、绘制矩形
比较常见的操作就是绘制矩形了，2D上下文和矩形相关的方法包括：fillReact() 和 strokeReact()，clearReact()。 这三个方法都接受四个参数，X坐标，Y坐标，矩形width，矩形hegith。fillReact用来对矩形填充指定颜色，strokeReact对矩形用指定颜色进行描边。clearReact用来清楚画布上的矩形。
例子：
if (draw.getContext) { var context = drwa.getContext("2d"); //绘制红色矩形 context.fillStyle = "#ff0000"; context.fillRect(30, 30, 50, 50); //绘制半透明的蓝色描边矩形 context.strokeStyle="rgba(0, 0, 255, 0.5)"; context.strokeRect(30, 30,50,50) }3、绘制路径
2D绘制上下文支持多种绘制路径方式，绘制路径首先必须调用beginParh()方法，表示要开始绘制新路径。
arc(x, y, radius, startAngle, endAngle, countercockwise)： 以X,Y为圆心，radius为半径的弧线；
arcTo(x1, y1, x2, y2, radius )：从上一点开始绘制一条弧线到x2, y2止，并且以给定的半径radius穿过(x1, y1)
lineTo(x, y)：绘制一条直线，到(x, y) 为止
moveTo(x, y)： 将绘图游标移动到(x, y)
react(x, y, width, heigth)： 从(x, y)开始绘制一个宽度是width高度是height的矩形。
例子，绘制不带数字的时钟表盘
if (draw.getContext) { var context = draw.getContext("2d"); //绘制红色矩形 context.fillStyle = "#ff0000"; context.fillRect(30, 30, 50, 50); //绘制半透明的蓝色描边矩形 context.strokeStyle="rgba(0, 0, 255, 0.5)"; context.strokeRect(30, 30,50,50) }
四，绘制文本
2D绘图上下文绘制文本主要用到2个方法：fillText(string, x, y, pwidth) 和strokeText(string, x, y, pwidht)。
3个相关的属性：
font：设置文本字体、大小、样式。如“10px arial ”
textAligin：文本对齐方式
texttBaseline：文本基线
context.font = "bold 14px arial"; context.textAlign = "center"; context.textBaseline = "middle";canvas 2D绘图还有些其他的方法操作，后面有时间再继续做笔记。
