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

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加载图片......但是由于交叉原点，我想不出如何渲染图片的方法。我可以在画布上渲染得很好，但是用Pixi.Sprite就不行了。

Answer 1

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

1. 请检查这些页面的WebGL支持情况。https:/get.webgl.org , https:/webglreport.com
2. 你能试着在一些简单的页面上初始化Pixi，以检查它是否适合你？我的意思是，只需创建一个简单的html页面（没有React等），尝试在那里设置Pixi，并尝试绘制任何东西（一些红色的圆圈等）。