最近用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() 丢弃任何当前定义的路径并且开始一条新的路径。

画三角形请看下集：http://www.jianshu.com/p/e383d69b017b