HTML画布：如何创建填充网格的多边形

为了构建HTML5数据中心平面图，我想创建一个填充网格的多边形。此网格不能是图片模式，因为我希望能够在没有像素化的情况下缩放或旋转楼层平面。 我希望能够创建这种输出：

---

我该怎么做呢？

有多种方法，比如

• 使用

var ctx=c.getContext（'2d'）；
drawShape（）；
ctx.stroke（）；
ctx.save（）；//因此，我们可以删除剪辑
ctx.clip（）；
drawGrid（）；
ctx.restore（）；//删除剪辑
函数drawShape（）{
ctx.beginPath（）；
变量pts=[
20, 20,
80, 20,
90, 50,
120, 90,
30, 80,
20,20
];
对于（var i=0；我非常感谢你，我不知道这样做是可能的。