坐标系统简析
左边是笛卡尔坐标系,右边是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 清除画布,视觉上感觉就是在顺时针移动。