数字矩阵算法

var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
    var start = 1, end = 256, step = 30, direction = 'right';
    var len = end - start + 1, wLen = 1, hLen = 1, flag = 1;
    var sideLength = Math.ceil(Math.sqrt(len)); // 总数求边长
    var currentX = step*(sideLength-1)/2, currentY = step*(sideLength+2)/2;

    ctx.moveTo(currentX, currentY);
    ctx.font = "14px sans-serif";
    // ctx.fillRect(0,0, canvas.width, canvas.height)
    ctx.fillStyle = "#000";
    console.log(sideLength);
    while (len--) {
        currentX += getXY(direction).x;
        currentY += getXY(direction).y;
        
        ctx.fillText(start++, currentX, currentY);

        ctx.moveTo(currentX, currentY);
        
        if (direction == 'up' && flag > hLen) {
            hLen++;
            direction = 'right';
            flag = 1;
        } else if (direction == 'right' && flag > wLen) {
            wLen++;
            direction = 'down';
            flag = 1;
        } else if (direction == 'down' && flag > hLen) {
            hLen++;
            direction = 'left';
            flag = 1;
        } else if (direction == 'left' && flag > wLen) {
            wLen++;
            direction = 'up';
            flag = 1;
        }

        flag ++;
    }

    function getXY(dir) {
        var x = 0, y = 0;
        switch(dir) {
            case 'up':  
                x = 0;
                y -= step;
                break;
            case 'right':  
                x += step;
                y = 0;
                break;
            case 'down':  
                x = 0;
                y += step;
                break;
            case 'left':  
                x -= step;
                y = 0;
                break;
        }       
        return {x: x, y: y}
    }