其实canvas真的很简单，复杂的部分其实是你的创意

江湖上流传开来的除了牛叉的"H5"，还有牛叉的canvas应用。

canvas是html5的一部分，当然他们说的H5也并不是html5的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。

曾几何时，我也觉得canvas真的酷爆了，各种什么烟花、酷炫的动画效果、canvas游戏等，都燃烧着我学习的热情。

后来通过学习，多看书，其实canvas并不复杂，要用到的东西也不多。

大概整理一下：

1、绘制基本几何图形

（1）直线

ctx.moveTo(100,200);
ctx.lineTo(120,300);
ctx.lineWidth = 10;
ctx.strokeStyle = '#000';
ctx.stroke();

（2）矩形

ctx.fillRect(0,0,100,100);

（3）圆形

ctx.arc(200,200,100,0,Math.PI*(1/2),false);		//x,y,半径，起始角度，结束角度，是否逆时针方向
ctx.stroke();

（4）三角形（用直线来连接实现）

ctx.moveTo(400,200);
ctx.lineTo(350,260);
ctx.lineTo(450,260);
ctx.lineTo(400,200);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'orange';
ctx.stroke();
ctx.fill();

（5）曲线

ctx.lineWidth = 2;
ctx.strokeStyle = "#f00";
ctx.moveTo(10,10);
ctx.arcTo(210,60,10,210,20);
ctx.stroke();

（6）