canvas-画线
坐标系统简析
左边是笛卡尔坐标系，右边是canvas坐标系。
笛卡尔坐标系（Cartesian coordinate system）：
也称直角坐标系，是一种正交坐标系。二维的直角坐标系是由两条相互垂直、0点重合的数轴组成。
canvas坐标系和web坐标系一致，左上角为原点。
绘制线
代码基础：
var canvas = document.getElementById('j-canvas');if (canvas.getContext) { var ctx = canvas.getContext('2d'); // 在此添加代码}主要方法：
lineTo()单纯只用上面一个方法是不能画出线的，需要别的方法配合：
ctx.moveTo(0,10); // 画笔的起点或重新定位画笔 ctx.lineTo(200,10); ctx.stroke(); // 描边 绘制结果，如下：
修饰方法：
lineWidth：默认值 1.0
ctx.lineWidth = number;
lineCap: 线的尾部何种样子
ctx.lineCap = "butt"; // 默认值ctx.lineCap = "round";ctx.lineCap = "square";如下：
square的尺寸为： lineWidth/2 * lineWidth
lineJoin: 线与线之间如何衔接
ctx.lineJoin = "bevel";ctx.lineJoin = "round";ctx.lineJoin = "miter"; // 默认值
注：round的半径是lineWidth，miter为两条线延伸然后组成一个菱形。
miterLimit:
ctx.miterLimit = value; // 默认值 10.0，（设置为：0, 负值, Infinity and NaN 则忽略）设置或返回最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离：
注：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（图解 3）：
setLineDash():
ctx.setLineDash(segments); // segments 为数组若数组为：[5,10]，设置偶数个数值，[线，空白]交替绘制
线就是5，空白就是10。
如果数组为：[5,10,15]，设置奇数个数值，内部会变成 [5,10,15,5,10,15],[线，空白,线，空白，线，空白]
getLineDash():
ctx.getLineDash(); 返回一个偶数个数字的数组，若设置的为[5,10]，返回则为[5,10]；若设置的为[5,10,15]，返回则为[5,10,15,5,10,15]。
lineDashOffset:
ctx.lineDashOffset = value;默认值：0.0，设置线的偏移量，可正（整体逆时针移动），可负（整体顺时针移动）
绘制（Marching ants）
var offset = 0;(function march(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.setLineDash([5, 10]); ctx.beginPath(); ctx.lineDashOffset = -offset; ctx.moveTo(10, 40); ctx.lineTo(200, 40); ctx.lineTo(200,100); ctx.lineTo(10,100); ctx.lineTo(10,40) ctx.stroke(); // 增加 offset++; setTimeout(xxx,100)})();原理：offset每100毫秒增加一个单位，每增加一个单位整体就向右移动一个单位，再配合 clearRect 清除画布，视觉上感觉就是在顺时针移动。