画布 Fabricjs 中的多种背景颜色

Question

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

Answer 1

您不能为画布使用多个背景，但我们动态创建背景并应用彩色织物 js 允许将渐变应用于对象，就像这样..

 var canvas = new fabric.Canvas("c"); var bgrect = new fabric.Rect({ left: 0, top: 0, width: canvas.getWidth(), height: canvas.getHeight(), selectable:false }); bgrect.setGradient('fill', { x1: 0, y1: 0, x2: 0, y2: bgrect.height, colorStops: { 0: "rgba(163,125,68,1)", 0.5:"rgba(163,125,68,1)", 0.51:"rgba(153,29,29,1)", 1: "rgba(153,29,29,1)" } }); canvas.add(bgrect) bgrect.sendToBack();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <canvas id="c"></canvas>

Answer 2

是的，使用 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 是从cssmatic生成的。

希望能帮助到你。