关于javascript:fabricjs设置canvas的clipPath后背景色不显示解决办法

当您在 Fabric.js 中设置 clipPath 后，该门路区域之外的任何内容都将被剪切，包含 canvas 的背景色。因而，如果您心愿 canvas 背景色显示在剪切门路之外的区域，您能够应用以下两种办法之一：

（1）应用一个蕴含背景色彩的对象或者一个填充了背景色的矩形作为 clipPath，这样 clipPath 区域内的内容将被保留，而其余区域将绘制为背景色。例如：

var rect = new fabric.Rect({
  left: 0,
  top: 0,
  width: canvas.width,
  height: canvas.height,
  fill: 'white'
});

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
});

var clipPath = new fabric.Circle({
  left: 50,
  top: 50,
  radius: 25
});

canvas.add(rect, circle, clipPath);
circle.clipPath = clipPath;

在这个例子中，咱们创立一个矩形对象作为背景，而后将它增加到 canvas 上。咱们还创立了一个圆形对象，并将它的 clipPath 属性设置为一个圆形对象。这样，圆形对象将只在圆形 clipPath 区域内显示，并且矩形对象将在 clipPath 区域外显示。

（2）应用 CSS 款式为 canvas 增加背景色。例如：

canvas {background-color: white;}

在这个例子中，咱们应用 CSS 款式为 canvas 增加背景色。这将在整个 canvas 上绘制一个背景色，即便在应用 clipPath 剪切时，背景色也将持续显示。