防止随机生成的位置修剪画布边缘

时间:2019-07-16 13:17:20

标签: javascript html5-canvas drawing

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

我尝试检查随机位置是否+-半径,以查看它们是否在边缘晃动,但这似乎没有帮助下面的代码

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;

理想的结果是防止绘制的对象夹住画布的边缘

1 个答案:

答案 0 :(得分:0)

评论的答案似乎都行得通。

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


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