Javascript 画布Fabricjs中的多种背景色

Hi可以使用fabricjs在画布中添加两种背景色，如下所示：

---

是的，使用css渐变是可能的。我已经用这些颜色为你创建了一个背景

canvas {
  background: rgba(163,125,68,1);
  background: -moz-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(163,125,68,1)), color-stop(50%, rgba(158,115,51,1)), color-stop(51%, rgba(158,17,17,1)), color-stop(100%, rgba(153,29,29,1)));
  background: -webkit-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
  background: -o-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
  background: -ms-linear-gradient(top, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
  background: linear-gradient(to bottom, rgba(163,125,68,1) 0%, rgba(158,115,51,1) 50%, rgba(158,17,17,1) 51%, rgba(153,29,29,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a37d44', endColorstr='#991d1d', GradientType=0 );
}

渐变css是从中生成的

---

希望能有所帮助。

您不能在画布上使用多个背景，但我们会动态创建背景并应用颜色结构js，以便像这样对对象应用渐变

var canvas=newfabric.canvas（“c”）；
var bgrect=newfabric.Rect({
左:0,，
排名：0，
宽度：canvas.getWidth（），
高度：canvas.getHeight（），
可选：false
});
bRect.setGradient（'填充'{
x1:0，
y1:0，
x2:0，
y2:b垂直高度，
色块：{
0:“rgba（163125,68,1）”，
0.5:“rgba（163125,68,1）”，
0.51:“rgba（153,29,29,1）”，
1:“rgba（153,29,29,1）”
}
});
canvas.add（bgrect）
bgrect.sendToBack（）

这是一个糟糕的解决方案，因为我需要使用ColorPickerit更改背景颜色。这不是一个糟糕的解决方案。这是个糟糕的问题。您应该在问题中提到这一点，无论哪种方式，都可以从colorPicker通过javascript更改css。但是对于不同颜色的背景，这种渐变css是最好的解决方案。将背景颜色设置为style将不允许您将内容导出到其他图像o到svg，也不允许使用json对其进行序列化。现在您让我认为它是背景功能，因为渐变应该添加到fabricjs中。