最近用canvas比较多，为了梳理思路和备忘，决定写下来。
canvas并不像svg，说白了它就是一张图片，不管在什么情况下它都只是一张图片而已，而svg里面的图形都是标签元素，可以直接添加事件等。canvas添加事件必须要用坐标去判断。
首先画一个线（布局同canvas Two http://www.jianshu.com/p/e383d69b017b)
线
<script>
document.addEventListener("DOMContentLoaded",function(){
var oC = document.getElementById("canvas1");
var gd = oC.getContext("2d");
gd.lineWidth = 20;
gd.strokeStyle = "green";
//用于对比
gd.beginPath();
gd.moveTo(100,100);
gd.lineTo(100,250);
gd.stroke();
gd.beginPath();
gd.moveTo(200,100);
gd.lineTo(200,250);
gd.lineCap = "butt";
gd.stroke();
gd.beginPath();
gd.moveTo(300,100);
gd.lineTo(300,250);
gd.lineCap = "round";
gd.stroke();
gd.beginPath();
gd.moveTo(400,100);
gd.lineTo(400,250);
gd.lineCap = "square";
gd.stroke();
},false);
</script>
效果图：
Paste_Image.png
1、gd.lineCap 属性设置或返回线条末端线帽的样式，还有一个lineJoin和lineCap类似，lineJoin是连接点形状。
Paste_Image.png
2、在画同一个canvas上面画多个图形的时候需要在开始的时候加上gd.beginPath();
w3c定义：beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。
