Question

使用destination-out填充模式fabric.js添加文字的正确方法是什么？我试图在背景图像上应用文本掩码。

到目前为止，这是我的简单方法。我还没有添加BG，但仍然希望红色面具被淘汰出局：

<canvas id="logo" width="600" height="250"></canvas>

$(document).ready(function(){
    var canvas = new fabric.Canvas('logo');
    canvas.backgroundColor="green";
    var mask = new fabric.Rect({
        left: 0,
        top: 0,
        width: 600,
        height: 200,
        fill :'red',
    });
    canvas.add(mask);

    var text = new fabric.Text("TEST TEXT", {
        fontSize: 120,
        fontFamily: 'Arial',
        fill: 'white',
        stroke: "black",
        fillRule: 'destination-out'
    });
    canvas.add(text);

});

小提琴here。

Answer 1

这是你在找什么？

    $(document).ready(function(){
    var canvas = new fabric.Canvas('logo');
    canvas.backgroundColor="green";
    var mask = new fabric.Rect({
        left: 0,
        top: 0,
        width: 600,
        height: 200,
        fill: 'blue'
    });
    canvas.add(mask);

    var text = new fabric.Text("TEST TEXT", {
        fontSize: 120,
        fontFamily: 'Arial',
        stroke: "black",
        fill: 'none',
        fillRule: 'destination-out'
    });
    canvas.add(text);

});

http://jsfiddle.net/disinfor/3x8bs/3/

fabric.js中的文本掩码（目标输出）

1 个答案: