试图根据距离舞台中心的距离限制动力学多边形的绘制

Question

我正在尝试以编程方式在圆圈中绘制多边形网格。我试图通过使用毕达哥拉斯定理中画布元素上的坐标来做到这一点：

function createTri(x, y) { //This function works correctly without the if statement.

    var tri = new Kinetic.Rect({
        x: x,
        y: y,
        width: 11,
        height: 11,
        fillRed: 17,
        fillGreen: 17,
        fillBlue: 17,
        closed: true,
        shadowColor: '#5febff',
        shadowBlur: 3,
        shadowOpacity: 0.18
    });

    if ((Math.abs(Math.pow(x, 2)) + Math.abs(Math.pow(y, 2))) < Math.pow(radius, 2)) { //This causes the squares not to be drawn.
        layer.add(tri);
    };
}

函数应该如何工作只有在坐标小于半径的情况下才能绘制正方形，但根本不绘制三角形。

如果我取出if语句，我的其余代码会在覆盖页面的网格中正确绘制正方形。

我对广场人口的完整代码是这样的：

var xt = stage.width() / 2;

var yt = stage.height() / 2;

var radius = 300;

var pax = [];

//Pushes the coordinates to the 3D Array (This works correctly)
for (var i = 0; i < stage.height() / 12; i++) {
    pax[i] = [];
    for (var j = 0; j < stage.width() / 12; j++) {
        pax[i][j] = [];
        pax[i][j].push(j * 12 - (stage.width() / 2) + xt, i * -12 + (stage.height() / 2) + yt);
    };
}

function createTri(x, y) { //This function works correctly without the if statement.

    var tri = new Kinetic.Rect({
        x: x,
        y: y,
        width: 11,
        height: 11,
        fillRed: 17,
        fillGreen: 17,
        fillBlue: 17,
        closed: true,
        shadowColor: '#5febff',
        shadowBlur: 3,
        shadowOpacity: 0.18
    });

    if ((Math.abs(Math.pow(x, 2)) + Math.abs(Math.pow(y, 2))) < Math.pow(radius, 2)) { //This causes the squares not to be drawn.
        layer.add(tri);
    };
}


//drawing triangles to correct grid coordinates (This works properly)
for (var i = 0; i < pax.length; i++) {
    for (var j = 0; j < pax[i].length; j++) {
        createTri(pax[i][j][0], pax[i][j][1]);
    };
}

一切看起来都是正确的，所以我不确定if声明在哪里出错。