Javascript 创建用三角形填充的矩形

我用JavaScript（SVG或Canvas）实现了这一点，但我真的只是想寻找一些伪代码来说明如何实现这一点：

如果给定一个矩形，如何用不同大小、不重叠的三角形填充它，类似于下图：

更新

以下是我为那些感兴趣的人提出的建议。我使用了D3.js，它有一个很好的delaunay函数来实现这一点

var宽度=360；
var高度=220；
变量顶点=d3.范围（100）.映射（函数（d）{
返回[Math.random（）*宽度，Math.random（）*高度]；
});
//将坐标放置在拐角处
[
[0, 0],
[宽度，0]，
[0，高度]，
[宽度、高度]
].forEach（功能（d）{
顶点。推（d）；
});
//添加mousemove后面的临时坐标
顶点。取消移位（[0,0]）；
var svg=d3.选择（“#main”）.追加（“svg”）
.样式（“宽度”，宽度+px”）
.样式（“高度”，高度+px”）
.on（“mousemove”，函数（）{
顶点[0]=d3.鼠标（此）；
draw（）；
})
.on（“单击”，函数（）{
顶点.push（d3.mouse（this））；
});
var path=svg.append（“g”）.selectAll（“path”）；
draw（）；
函数绘图（）{
path=path.data（d3.geom.delaunay（顶点）.map（函数d）{
返回“M”+d.join（“L”）+Z；
})，字符串）；
path.exit（）.remove（）；
path.enter（）.append（“path”）.attr（“class”），函数（d，i）{
返回“q”+（i%9）+“-9”；
}).attr（“d”，字符串）；
}

#主{
位置：相对位置；
宽度：360px；
高度：220px；
边框：1px实心#ddd；
}
路径{
填充：#fff；
笔画：钢蓝；
}

---

我将执行以下操作：

• 为点定义2D数组，为每条线定义1D数组，其中每个条目包含一个顶点/角点
• 基于栅格创建点
• 使用某种形式的“抖动”偏移相同的点。抖动只会偏移点的位置，但在阵列中仍然具有相同的顺序
• 在阵列上循环使用一种方法，在两条线上为每两点绘制一个象限
• 使用两个相对的角点将该象限拆分为两个三角形

不同的抖动会产生类似的图案，如图所示。要控制抖动，您可以随机化角度和半径，而不仅仅是位置。然后将结果转换到新位置

ASCII表示法（可能不有用）：

应用抖动

以有序方式绘制点位置：

line 0: xy_xy_xy xy xy ....
        | /| /| ...
        |/_|/_|
line 1: xy xy xy xy xy ....
...

---

你也可以研究，但要知道，你最终会得到二次多边形和n边形，后者可能是一个挑战，但请检查一下。

有人已经编写了一个库来实现这一点

看，他们实际上只是使用库D3，它使用Delaunay三角剖分（正如Ken Fyrstenberg提到的）。但是谢谢！感谢您向我展示Delaunay三角剖分，事实证明D3.js有一个使用此算法的函数。我更新了我的答案，展示了一个创造这种效果的例子。

line 0: xy_xy_xy xy xy ....
        | /| /| ...
        |/_|/_|
line 1: xy xy xy xy xy ....
...