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;

您的代码删除 min 变量。你得到：

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?

HTML5 Canvas：在画布外部生成随机定位的对象

1 个答案: