在给定的矩形上设置3个对应点

var width = 300,
    height = 200,
    margin = 0;

var rnd = function(min, max) {
    return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
};

var point = rnd(0, (width * 2) + (height * 2));

var points = [
    { x: 0, y: 0 },
    { x: 0, y: 0 },
    { x: 0, y: 0 },
    { x: 0, y: 0 }
]

var set_point = function(point) {
    var coords = { x: 0, y: 0 };
	
    if(point <= width) { // if on top
        coords.x = point;
        coords.y = -margin;
    } else if(point <= width + height) { // if on the right
        coords.x = width + margin;
        coords.y = point - width;
    } else if(point <= (width * 2) + height) { // if on the bottom
        coords.x = ((width * 2) + height) - point;
        coords.y = height + margin;
    } else { // if on the left
        coords.x = -margin;
        coords.y = ((width * 2) + (height * 2)) - point;
    }
	
    return coords;
};

var test = set_point(point);
points[0].x = test.x;
points[0].y = test.y;

for(var i = 0; i < 1 /*points.length*/; i++) {
	var dot = document.createElement('div');
	dot.className = 'point';
	dot.style.left = points[i].x + 'px';
	dot.style.top = points[i].y + 'px';
	document.querySelector('.rect').appendChild(dot);
}

.rect {
    border:solid 1px #000;
    width:300px;
    height:200px;
    position:absolute;
    top:calc(50% - 100px);
    left:calc(50% - 150px);
}

.point {
    width:10px;
    height:10px;
    position:absolute;
    border-radius:100%;
    border:solid 1px red;
    background:red;
    transform:translate3d(-5px, -5px, 0);
}

<div class="rect"></div>