HTML5 Canvas: Создавать случайно расположенные объекты за пределами холста

Question

То, что я пытаюсь изучить, - это создать объекты за пределами холста с разных сторон ..., которые находятся слева, справа, сверху, снизу.

For (i = 0; i < 10; i++) { 
    ctx.beginPath(); 
    ctx.arc(Math.random()*Window.outerWidth, Math.random()*Window.outerHeight 30, 0, 2 * Math.PI, false); 
    ctx.fillStyle = 'black'; 
    ctx.fill(); 
    ctx.closePath(); 
} 

Так что в основном представляйте объекты, появляющиеся из некоторых случайных позиций в верхней, левой, правой и боковых краях холста. Возможно, даже в углах. Итак, дело в том, что у меня есть некоторые проблемы с пониманием логики того, как это работает. Как мне добиться чего-то подобного?

Пожалуйста, имейте в виду, что я не просто ищу ответы, а ресурс для обучения. Если вы ответите, пожалуйста, сделайте это с учением, а не «точками».

Answer 1

Это Math.random() * Window.outerWidth быстро от записи:

var min = 0, max = Window.outerWidth; 
Math.random() * (max - min + 1) + min; 

Чтобы понять это, смотрите эту функцию:

function getRandom(min, max) { //You get number between [min, max] 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

Если вы хотите добавить круг внутри холста, вам необходимо установить:

var min = 0, 
    max = Window.outerWidth; 

Ваш код remove мин va riable. Вы получаете:

Math.random() * (max - 0) + 0; // replace min by 0 
Math.random() * max // remove 0 
Math.random() * Window.outerWidth // max = Window.outerWidth 

Вы получаете: Math.random() * Window.outerWidth.

Ссылки:

• Generating random whole numbers in JavaScript in a specific range?