javascript - 防止随机生成的位置剪裁画布边缘

Question

我正在创建一个画布，其中填充了在随机位置生成的圆圈，并让它们在画布上随机移动并在它们到达画布边缘时改变方向。我遇到的问题是一些圆圈是在画布之外生成的，所以它们卡在了边缘。

我已经尝试检查随机位置是否 +- 半径以查看它们是否符合边缘，但这似乎无助于下面的代码

if ((x - radius > 0 || x +radius < secondCanvas.width) && (y - radius > 0 || y + radius < secondCanvas.height))
        {
            circleArray.push(new Circle(x, y, dx, dy, radius))
        }

生成圆圈位置的代码是

var radius = 5
        var x = Math.random() * secondCanvas.width;
        var y = Math.random() * secondCanvas.height;

期望的结果是防止绘制的对象剪裁画布的边缘

标签： javascripthtml5-canvasdrawing

Answer 1

从评论中回答，两者似乎都有效。

if(x - radius > 0 && x + radius < secondCanvas.width) && (y - radius > 0 && y + radius < secondCanvas.height)


var x = radius + (Math.random() * (secondCanvas.width - 2*radius));