面料JS漸變色

我正在使用面料js並需要製作漸變色。面料JS漸變色

面料JS小提琴 Fabric 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);

來源

2014-10-31 ashishbhattb

化妝的jsfiddle和現場工作演示，讓我們知道與我已經在這裏共同檢查一遍分享面料JS這個例子鏈接 – Innodel 2014-11-01 11:12:03

：http://jsfiddle.net/ashishbhatt/e425a3ew/ 參考：http：//jsfiddle.net/ashishbhatt/7x4q91kj/ – ashishbhattb 2014-11-03 06:10:08

你會用完美的方式，比什麼是問題？ – Innodel 2014-11-03 06:47:43

我認爲你正在嘗試使用3種顏色的fabricjs實現漸變。你可以使用小提琴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,

來源

2017-11-09 16:30:33 Keysinnovation

回答

相關問題