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 清除画布，视觉上感觉就是在顺时针移动。