Ткань Цвет градиента JS

Question

Я использую js ткани и должен сделать цвет градиента.

Ткань JS Fiddle Fabric link

Ссылки холст градиент Reference Gredient link

Пожалуйста направьте меня для ткани JS для достижения градиента, как с помощью обычного холста.

Fabric JS :+Snap of code 
rect.setGradient('fill', { 
    x1: 0, 
    y1: -rect.height, 
    x2: rect.width, 
    y2: rect.height, 
    colorStops: { 
    0: "black", 
    0.5: "red", 
    1: "blue" 
    } 
}); 

Normal Canvas Code : 
var grd=ctx.createLinearGradient(45,50,170,90); 
grd.addColorStop(0,"black"); 
grd.addColorStop(0.5,"red"); 
grd.addColorStop(1,"blue"); 
ctx.fillStyle=grd; 
ctx.fillRect(20,20,150,100); 

Answer 1

Я думаю, вы пытаетесь достичь градиента, используя fabricjs с 3 цветами. Вы можете сделать это примерно так, используя скрипку here.

//diagonal 
rect.setGradient('fill', { 
    x1: -rect.width/2, 
    y1: -rect.height/2, 
    x2: rect.width/2, 
    y2: rect.height/2, 
    colorStops: { 
    0: "black", 
    0.5: "red", 
    1: "blue" 
    } 
    }); 
// horizontal 
    rect.setGradient('fill', { 
    x1: -rect.width/2, 
    y1: 0, 
    x2: rect.width/2, 
    y2: 0, 
    colorStops: { 
     0: "black", 
     0.5: "red", 
     1: "blue" 
    } 
    }); 

    // vertical just change below 
    x1: 0, 
    y1: -rect.height/2, 
    x2: 0, 
    y2: rect.height/2,