Javascript Pixi js使用画布纹理填充形状

我正在试图找到一种方法，可以使用从画布创建的纹理填充PIXI.js中的形状。 这样做的原因是我想在普通html画布上创建一个渐变，他们用它制作一个纹理，并将其添加到pixi阶段。现在我可以做到了，这是我测试的第一件事，它是有效的。但最终目标是使用Graphics类在PIXI.js中创建形状，然后用我的渐变填充它们。我不知道如何实现这一点，因为.beginul（）方法只接受颜色。如何用纹理填充形状？ 这是我的密码。我知道辅助画布的创建有点冗长，但这是以后的问题

$(document).ready(function() {
    var stage = new PIXI.Container();
    var renderer = PIXI.autoDetectRenderer(800, 600);
    document.body.appendChild(renderer.view);

    //Aliases
    var Sprite = PIXI.Sprite;
    var TextureCache = PIXI.utils.TextureCache;
    var resources = PIXI. loader.resources;

    function AuxCanvas(id, w, h, color1, color2) {
        this.id = id;
        this.w = w;
        this.h = h;
        this.color1 = color1;
        this.color2 = color2;
    }
    // create and append the canvas to body
    AuxCanvas.prototype.create = function() {
        $('body').append('<canvas id="'+
            this.id+'"  width="'+
            this.w+'" height="'+
            this.h+'"></canvas>');
    }
    // draw gradient
    AuxCanvas.prototype.drawGradient = function() {
        var canvas = document.getElementById(this.id);
        var ctx = canvas.getContext('2d');
        var gradient = ctx.createLinearGradient(0, 0, 800, 0);
        gradient.addColorStop(0, this.color1);
        gradient.addColorStop(1, this.color2);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, this.w, this.h);
    }

    function setup() {

        var graphics = new PIXI.Graphics();
        graphics.beginFill(PIXI.Texture.fromCanvas(can1)); //This doesn't work obviously
        graphics.drawCircle(60, 185, 40); 
        graphics.endFill();
        stage.addChild(graphics);
        renderer.render(stage);
    }

    var can1 = new AuxCanvas("can1", 800, 600, "green", "yellow");
    can1.create();
    can1.drawGradient();

    var can2 = new AuxCanvas("can2", 800, 600, "blue", "red");
    can2.create();
    can2.drawGradient();

    setup();
})

$（文档）.ready（函数（）{
var stage=new PIXI.Container（）；
var renderer=PIXI.autodetectedrenderer（800600）；
document.body.appendChild（renderer.view）；
//别名
变量Sprite=PIXI.Sprite；
var TextureCache=PIXI.utils.TextureCache；
var resources=PIXI.loader.resources；
函数AuxCanvas（id、w、h、color1、color2）{
this.id=id；
这个.w=w；
这个，h=h；
this.color1=color1；
this.color2=color2；
}
//创建画布并将其附加到主体
AuxCanvas.prototype.create=function（）{
$（'body'）。追加（''）；
}
//绘制坡度
AuxCanvas.prototype.drawGradient=函数（）{
var canvas=document.getElementById（this.id）；
var ctx=canvas.getContext（'2d'）；
var gradient=ctx.createLinearGradient（0,0,800,0）；
gradient.addColorStop（0，this.color1）；
gradient.addColorStop（1，this.color2）；
ctx.fillStyle=渐变；
ctx.fillRect（0，0，this.w，this.h）；
}
函数设置（）{
var graphics=new PIXI.graphics（）；
graphics.beginul（PIXI.Texture.fromCanvas（can1））；//这显然不起作用
绘图圈（60、185、40）；
graphics.endFill（）；
stage.addChild（图形）；
渲染器。渲染（舞台）；
}
var can1=新的AuxCanvas（“can1”，800600，“绿色”，“黄色”）；
can1.create（）；
can1.drawGradient（）；
var can2=新的AuxCanvas（“can2”，800600，“蓝色”，“红色”）；
can2.create（）；
can2.drawGradient（）；
设置（）；
})

好吧，我想出了一个办法，其实很简单。 只需将图形对象作为从html画布创建的精灵的掩码

function setup() {
    var can2 = document.getElementById('can2');
    var sprite = new Sprite(PIXI.Texture.fromCanvas(can2))
    var graphics = new PIXI.Graphics();
    graphics.beginFill();
    graphics.drawCircle(300, 300, 200); 
    graphics.endFill();
    sprite.mask = graphics;
    stage.addChild(sprite);
    renderer.render(stage);
}

此外，作为精灵的子对象添加图形是最好的方法，只需确保它们的尺寸相同即可。完成后，我可以自由移动精灵，它的渐变纹理不会改变，或者更准确地说，它会随着精灵移动。当然，所有东西的尺寸都必须相等

var graphics = new PIXI.Graphics();
    graphics.beginFill();
    graphics.drawCircle(100, 100, 100); 
    graphics.endFill();
    sprite.addChild(graphics);
    sprite.mask = graphics;

---

这真的很好，看起来它也适用于LottieJS。语法已经更新了一点，您需要lottie渲染器使用canvas，还需要调用纹理更新来获得最新的动画帧。var anim=document.getElementById（'lotticanvas'）；if（anim）{this.texture=PIXI.texture.from（anim）；this.texture.update（）；}