Question

标题为

是否可以使用Pixi初始化画布上带有图像的画布，以便可以在其顶部添加过滤器？我正在使用gsap 3.2.6和Pixi 5.2.4。

我有这样创建的画布（使用React btw）

useEffect(() => {

        let ctx = imgDisplayer.current.getContext('2d');
        let img = new Image();
        img.onload = function(){
            imgDisplayer.current.width = img.width; // To set canvas width to image width
            imgDisplayer.current.height = img.height; // To set canvas height to image height
            ctx.drawImage(img, 0, 0);
            setCanvas(imgDisplayer.current);
        }
        img.src = source;
    }, []);

setCanvas将存储已加载的画布进入状态，以便我可以使用它来初始化Pixi。

if (canvas){
    const app = new Pixi.Application({
        width: 1300,
        height: 866,
        backgroundColor: 0x000000, 
        autoResize: true, 
        view: canvas
    });
}

问题是，这会引发以下错误

Error: This browser does not support WebGL. Try using the canvas renderer

如果只有我可以获取https图像（直接图像链接），那么这将不是问题，并且我可以使用Pixi.Sprite insteaad ..加载图像。但是由于交叉原点，我无法想到如何渲染图像。我可以在画布上很好地渲染它，但不能用Pixi渲染。

Answer 1

您粘贴的错误是您的浏览器不支持WebGL。

请在以下页面上检查WebGL支持：https://get.webgl.org/，https://webglreport.com/
您可以尝试在更简单的页面上初始化Pixi只是为了检查它是否适合您吗？我的意思是，只创建一个简单的html页面（不带React等），尝试在那里设置Pixi并尝试绘制任何东西（一些红色圆圈等）。

用PixiJ初始化现有画布的问题

1 个答案: