Javascript Fabric.js将画布（或对象组）剪裁到多边形

我在Fabric.js中绘制了一幅画布，我正在向其中添加一组矩形，我希望将这些矩形的边限制为一组，使其不超出某个区域

想象一下做一件条纹t恤，条纹是用一系列矩形做成的，我需要保持它们与t恤的形状一致

我认为最好将整个画布剪裁成t恤的形状，这样我添加的任何内容都会保留在t恤内，但我被卡住了。到目前为止，我只剪辑到基本的圆和矩形

---

谢谢

您可以在画布内渲染一个形状。clipTo：）

我刚刚在中加载了一个随机SVG形状，并执行了以下操作：

var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
  shape.render(ctx);
};

---

如您所见，整个画布现在被该SVG形状剪裁。

您也可以尝试以下方法：

---

您可以简单地使用多边形进行剪裁。这个问题的答案是基于@natchiketa的想法

先生，你是一个传奇。@simmisimi这是这个问题的第一项canvas@kangax你能给我举个例子吗？画布剪辑效果很好，但是这个剪辑功能也可以剪辑画布的背景图片，我不想剪辑它的背景图像。如果SVG中有多条路径，则此

clipTo

不起作用。请看问题。我们可以按图像形状来划分图像形状吗？

var clipPoly = new fabric.Polygon([
    { x: 180, y: 10 },
    { x: 300, y: 50 },
    { x: 300, y: 180 },
    { x: 180, y: 220 }
], {
    originX: 'left',
    originY: 'top',
    left: 180,
    top: 10,
    width: 200,
    height: 200,
    fill: '#DDD', /* use transparent for no fill */
    strokeWidth: 0,
    selectable: false
});