多種背景顏色Fabricjs

Question

喜是更多鈔票使用fabricjs像這樣的東西在畫布上添加兩個背景色：

Answer 1

是使用CSS梯度是可能的。我用這些顏色爲背景創建了一個Fiddle。

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生成。

希望它有幫助。

Answer 2

你可以不能夠使用多個背景畫布，但我們動態創建的背景和應用顏色面料的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>