SOURCE

console 命令行工具 X clear

                    
>
console
var c = new fabric.Canvas(canvas, {
    selection: false,
    height: 600,
    width: 600
});
let dis = c.width / 50;
let oneDis = dis * 5
options = {
    distance: dis,
    width: c.width / c.getZoom() + oneDis,
    height: c.height / c.getZoom() + oneDis,
    param: {
        stroke: '#ebebeb',
        strokeWidth: 1,
        selectable: false,
        evented: false,
        excludeFromExport: true,
        hasControls: false,
        perPixelTargetFind: false,
    }
};
gridLen = options.width / options.distance;

for (var i = 0; i < gridLen; i++) {
    var distance = i * options.distance,
        horizontal = new fabric.Line([distance, 0, distance, options.width], options.param),
        vertical = new fabric.Line([0, distance, options.width, distance], options.param);
    c.add(horizontal);
    c.add(vertical);
    if (i % 5 === 0) {
        horizontal.set({ stroke: '#cccccc' });
        vertical.set({ stroke: '#cccccc' });
    };
};

c.add(new fabric.Text('X-cord', {
    fontStyle: 'italic',
    fontFamily: 'Hoefler Text',
    fontSize: 12,
    left: 0,
    top: 0,
    hasControls: false,
    selectable: false
}));

function getMouseCoords(event) {
    var pointer = c.getPointer(event.e);
    var posX = pointer.x;
    var posY = pointer.y;

    c.getObjects('text')[0].text =
        "X: " + posX + " Y: " + posY;
    c.renderAll();

}
c.on('mouse:move', function(o) {
     getMouseCoords(o);
});
<canvas id="canvas" width="600" height="600"></canvas>
#canvas {
    border-right: 1px solid #ccc;
    border-bottom:1px solid #ccc;
}

本项目引用的自定义外部资源