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

分享到: