在web中绘制图像 -- canvas篇
汗，不小心点击发布了。其实正在编辑中。。。。。。
HTML Canvas是现代浏览器中非常棒的绘图技术，Canvas可以绘制图形，操作图片，制作游戏，创建动画等；Canvas是很容易使用的，下面我们来认识它吧。
在Web领域中，SVG，Canvas，CSS3均可以绘制图像，他们的区别主要在于：
Canvas：
- 依赖分辨率。Canvas本质上是一个能够绘图的图像元素。
- 在行为上类似于<img>的单纯的HTML元素
- 通过js脚本编程来创建和修改。
- canvas输出的是一整幅画布
SVG：
- 不依赖分辨率。SVG元素类似于HTML元素。
- 通过css或js脚本编程来创建和修改。
- svg绘制出来的每一个图形元素都是独立的DOM节点，可方便后期绑定事件或修改。
CSS：
- CSS可以定义DOM元素的样式，使用CSS3可以创建动画。
- DOM也可以结合JavaScript来实现动画
那么什么情况下使用Canvas？对图表、绘画、动态图像，还有视频游戏，Canvas都是非常适合的。
CANVAS--浏览器兼容性
| IE | FIREFOX | SAFARI | CHROME | OPERA | IPHONE | ANDROID |
| 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
注：IE7和IE8需要第三方库：explorercanvas。IE9支持<canvas>
canvas标签
首先创建一个canvas元素：
<canvas width="500" height="500"></canvas>
新建的canvas什么内容也没有，一片空白，我们可以用它绘制了。
var canvas = document.getElementById('canvas');
Canvas是HTML元素，可以通过getElementById获取其DOM。
var c = canvas.getContext('2d');
通过画布的 getContext() 方法获得的一个“绘图环境”对象。getContext方法指定参数2d，表示该canvas对象用于生成2D图案（即平面图案）。如果参数是3d，就表示用于生成3D图像（即立体图案），这部分实际上单独叫做WebGL API（本书不涉及）。
基本绘制方法
1.绘制矩形
1.1fillRect
<!doctype html> <html> <body> <canvas width="500" height="500" id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.fillStyle = "red"; c.fillRect(100,100,100,100); </script> </body> </html>
fillRect(x, y, width, height)方法用来绘制矩形，它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。
1.2
strokeRect
c.strokeStyle = "blue"; c.lineWidth = "2.0"; c.strokeRect(100,100,50,50);
strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。strokeStyle()方法定义描边颜色，lineWidth定义宽度。
clearRect方法用来清除某个矩形区域的内容。
c.clearRect(0,0,canvas.width,canvas.height);
2.绘制路径
c.fillStyle = "#4321fe"; c.beginPath(); c.moveTo(50,50); c.lineTo(200,50); c.lineTo(150,150); c.closePath(); c.fill();
beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，closePath方法用来将路径闭合，fill方法用来填充。
3.绘制文本
http://modernweb.com/2013/08/19/best-of-javascript-html-css-week-of-august-12-2013/
http://www.html5tricks.com/demo/100-css3-animated-icon/index.html
http://www.sitepoint.com/html5-canvas-tutorial-introduction/
http://diveintohtml5.info/canvas.html#divingin
http://javascript.ruanyifeng.com/htmlapi/canvas.html
贝塞尔曲线
http://www.cnblogs.com/doudougou/archive/2012/04/26/2472048.html
http://www.cnblogs.com/lhb25/archive/2011/04/12/1964343.html
http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
http://www.cnblogs.com/lixlib/archive/2012/12/17/2821338.html
http://www.cnbeta.com/articles/176994.htm
http://www.html5tricks.com/8-html5-canvas-animation.html
http://javascript.ruanyifeng.com/htmlapi/canvas.html
http://joshondesign.com/p/books/canvasdeepdive/chapter03.html
http://joshondesign.com/p/books/canvasdeepdive/toc.html
http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
http://codepen.io/katydecorah/pen/zxBRKv
http://codepen.io/picks/4/
http://codepen.io/JFarrow/pen/XJKOjJ
http://codepen.io/ZCKVNS/pen/vEXqoM
http://codepen.io/Alireza29675/pen/KwgwMy
http://codepen.io/Tyriar/pen/eKlzx
http://codepen.io/luckyyang/pen/loCBq
http://codepen.io/cathbailh/pen/wBBNWW
http://codepen.io/rlemon/pen/qhHIn
http://codepen.io/alikhalilifar/pen/CcHqg
http://codepen.io/ZCKVNS/pen/vEXqoM
ctx.save
ctx.translate
ctx.rotate
ctx.drawImage
ctx.restore
