Javascript 如何在画布中生成一个随机矩形而不接触线条？

如何使画布中的矩形在画布中的任意位置随机出现，但它永远不会触及分割线？矩形应该始终是我在代码中编写的矩形

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
//
ctx.rect（20,20,40,25）；
//
ctx.moveTo（100,0）；
ctx.lineTo（100500）；
ctx.moveTo（200,0）；
ctx.lineTo（200500）；
ctx.moveTo（0,75）；
ctx.lineTo（300,75）；
ctx.stroke（）；

您可以将网格中的插槽视为：

    0   1   2
  |---|---|---|
0 |   |   |   |
  |---|---|---|
1 |   |   |   |
  |---|---|---|

使用

Math.random（）

乘以列/行计数和

Math.floor

获得一个随机插槽位置，使用

splice（random_slot，2）

数组方法获得插槽的边界

有了边界，你只需简单地减去矩形的大小，就有了生成区域，通过一些随机的数学运算，你可以在这个边界的任何地方生成矩形，而且你永远不会碰到线条

水平数学示例：

columns = 20, 50, 270
[0, ...columns, c.width] = [0, 20, 50, 270, width]
random_slot = 2
splice(random_slot, 2) = [50, 270]
deduce rect.width of 270 to never touch right line = [50, 270 - 40]
add and remove pixels to never touch lines = [50 + 2, 230 - 2]
final horizontal bounds = [52, 282]
apply same logic to vertical bounds

最终代码：

var c=document.getElementById（“myCanvas”）；
c、 宽度=300；
c、 高度=150；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
//矩形尺寸
const rect=[40,25]；
常量列=[100200]；
常量行=[75]；
//画网格线
columns.forEach（col=>{
ctx.moveTo（col，0）；
ctx.lineTo（柱，c.高度）；
});
lines.forEach（line=>{
ctx.moveTo（0，行）；
ctx.lineTo（c.宽度，线条）；
});
//随机选择一个插槽
常数槽={
x:Math.floor（（columns.length+1）*Math.random（）），
y:Math.floor（（lines.length+1）*Math.random（））
};
//为繁殖点创建边界
常数界限={
水平：[0，…列，c.宽度]。拼接（插槽x，2），
垂直：[0，…线，c.高度]。拼接（插槽y，2）
};
//添加和删除一些像素以避免接触线条
水平[0]+=2；
垂直[0]+=2；
水平[1]=rect[0]+2；
边界.vertical[1]=rect[1]+2；
ctx.rect(
bounds.horizontal[0]+（bounds.horizontal[1]-bounds.horizontal[0]）*Math.random（），
bounds.vertical[0]+（bounds.vertical[1]-bounds.vertical[0]）*Math.random（），
rect[0]，
rect[1]
);
ctx.stroke（）