什么是Canvas
<canvas>是一个新的HTML元素，这个元素在HTML5中被定义成画图。这个元素通常是在html中可以通过javascript进行绘制图形，合成图像等等操作，也可以用来制作一些动画。而且一直被声称为是flash的杀手，虽然不知道是真是假，但是canvas确实存在的它的地位意义。
网上canvas的介绍和实例如雨后春笋一样，生机不断。但是我总是感觉每次看过的内容都会随着时间而消逝在我的大脑中，我想纪念他们，想回忆他们，所以我把自己学到的东西还是记录下来以慰藉我的将来。
开始学习canvas
<canvas id="mycanvas" width="500" height="400"></canvas>
这就是创建了一个画布。画布可以通过width和height来设置画图的大小，还可以用style来设置画图的一样样式。因为canvas就是html的一个标签。HTMLCanvasElement
Canvas的核心: Context
前面说过 canvas是通过javascript来进行图像的绘制和合成图像等操作。这些操作并不是通过canvas对象本身来操作，而且通过Canvas对象的一个方法getContext获取 CanvasRenderingContext2D这么一个对象，其实就是Drawing context绘图上下文，一个左上角为（0,0）的笛卡尔坐标平面。y轴向下是增加，x轴向右是增加。所以绘图都是在和canvas对象的context打交道。
获取drawing context绘图上下文的方法很简单，context=canvas.getContext("2d");现在一般用的参数就是2d，而且是小写的字母。
图形的基础-路径
在Canvas中，所有的图行都是以路径为基础的，也就是说我们调用2dContext的lineto、moveTo,Rect 等方法时，其实就是往context中添加一些路径点，最后使用fill或stroke方法进行绘制。都是根据路径点来进行填充或画线。
在每次开始绘制路径前，都应该使用context.beginPath()方法来告诉context对象开始绘制一个新的路径，否则接下来绘制的路径会与之前绘制的路径重叠的，在填充或画边框的时候就会出现问题。在绘制好路径后，可以直接使用context.closePath()方法来关闭路径，或者手动关闭路径。另外，如果在填充时路径没有关闭，那么Context就会自动调用closePath关闭路径。
基本路径方法
1、beginPath，closePath
这两个方法在前面已经介绍过，分别用来通知Context开始一个新的路径和关闭当前的路径。
当在绘制图形的时候，如果不调用beginPath，造成的影响可能是在之前的推行重新有做了一次，例如下面的三个矩形的不同实现方法：
<canvas id="myCanvas" width="400" height="400" style="border:1px,solid,black"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
调用draw();draw1();draw2()的时候，会出现的情况是不同的。因为draw1中并没有把之前的路径清除，所以每次都会在之前的基础上面绘制了一遍，因此draw1中图形中线条有加深的效果
function draw(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.rect(30+i*20,30+i*20,340-40*i,340-40*i);
cxt.stroke();
cxt.closePath();
}
}
function draw1(){
cxt.beginPath();
for(var i=0;i<8;i++){
cxt.rect(30+i*20,30+i*20,340-40*i,340-40*i);
cxt.stroke();
}
draw1.closePath();
}
function draw2(){
for(var i=0;i<8;i++){
cxt.strokeRect(30+i*20,30+i*20,340-40*i,340-40*i);
}
}
</script>
</body>
在context中路径数较少的时候，如果不考虑显示效果，性能上还可以接受，但是如果路径数很多的话，不清除的话，会出现性能下降的情况。
2、移动与直线moveTo lineTo rect
void moveTo(in float x,in float y);
在canvas中可以无需指定线条的起点，起点默认的就是你上一次绘制图形路径的终点。所以如果你想要指定起点，可以用moveTo来制定起点。
void lineTo(in float x,in float y);
lineTo方法是绘制一条直线路径到指定的位置。在调玩lineTo方法之后，Context内部的绘制起点到终点的直线。
void rect(in float x,in float y,in float w,in float h)
rect方法用来绘制一个矩形路径，通过参数指定左上角位置以及宽和高。在调用rect后，Context的绘制起点会移动到rect绘制的矩形的左上角。
3、曲线arcTo arc quadraticCurveTo bezierCurveTo
4、fill stroke clip
fill和stroke这两个方法是很好理解，分别就是填充路径和绘制路径线条。说明白了fill是填充图形，stroke是绘制路径。
clip方法用来填充canavs设置的一个编辑的区域，在调用clip方法之后的代码只对这个设定的编辑区域有效，不会影响到其他的地方。
5、 clearRect, fillRect, strokeRect
参考资料
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-text-to-the-canvas
浙公网安备 33010602011771号