Çoklu arka plan rengi

Question

Merhaba böyle fabricjs şey kullanarak tuval iki arka plan rengini eklemek posible Fabricjs:

Answer 1

Evet kullanarak css gradyan mümkündür. Arka plan olarak bu renkler ile sizin için bir Fiddle oluşturduk.

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); 
} 

Degrade css, cssmatic'dan oluşturulur.

Yardım edin.

Answer 2

yapabilirsiniz tuval için birden bilgileri uygulama becerilerine ama biz dinamik arka plan oluşturmak ve renk kumaş js Bunun gibi nesneye degrade uygulamak için izin uygulamak ..

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>