如何提高 PixiJS canvas 的质量？

Question

我用 PIXI JS 制作了水平滚动网站，它具有连锁反应。 到目前为止它运行良好，但唯一的问题是当我打开网站时它显示的质量非常低，据我发现 PIXI JS 渲染器的宽度和高度达到 800 x 600 分辨率。 任何想法如何改变质量？

这是 PIXI JS 代码片段：

 // Set up the variables needed and loads the images to create the effect. // Once the images are loaded the 'setup' function will be called. const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: 1, antialias: true }); document.body.appendChild(app.view); app.stage.interactive = true; var posX, displacementSprite, displacementFilter, bg, vx; var container = new PIXI.Container(); app.stage.addChild(container); PIXI.loader.add("depth.png").add("polygonexample.jpg").load(setup); // In the 'setup' function the displacement sprite is created // that will create the effect and this is added to a displacement filter. // It's then set to move its anchor point to the centre of the image and positioned on the screen. function setup() { posX = app.renderer.width / 2; displacementSprite = new PIXI.Sprite(PIXI.loader.resources["depth.png"].texture); displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); displacementSprite.anchor.set(0.5); displacementSprite.x = app.renderer.width / 2; displacementSprite.y = app.renderer.height / 2; vx = displacementSprite.x; // To finish off the 'setup' function, the displacement filter scale is set and the background positioned. // Notice the scale is '0' for the displacement, that's because it will be set to a height as soon as the mouse moves. app.stage.addChild(displacementSprite); container.filters = [displacementFilter]; displacementFilter.scale.x = 0; displacementFilter.scale.y = 0; bg = new PIXI.Sprite(PIXI.loader.resources["polygonexample.jpg"].texture); bg.width = app.renderer.width; bg.height = app.renderer.height; container.addChild(bg); app.stage.on('mousemove', onPointerMove).on('touchmove', onPointerMove); loop(); } // grab the position of the mouse on the x-axis whenever the mouse moves. function onPointerMove(eventData) { posX = eventData.data.global.x; } // create a function that continually updates the screen. A velocity for the x-axis is worked out using the position of the mouse and the ripple. function loop() { requestAnimationFrame(loop); vx += (posX - displacementSprite.x) * 0.045; displacementSprite.x = vx; var disp = Math.floor(posX - displacementSprite.x); if (disp < 0) disp = -disp; var fs = map(disp, 0, 500, 0, 120); disp = map(disp, 0, 500, 0.1, 0.6); displacementSprite.scale.x = disp; displacementFilter.scale.x = fs; } // Finally, the map function is declared that maps value ranges to new values. map = function(n, start1, stop1, start2, stop2) { var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2; return newval; };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>

Answer 1

尝试使用此代码创建渲染器

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: 1,
});

但是如果在创建渲染器后调整 window 的大小，它不会自动调整为 window 的大小。 要解决这个问题，您可以收听调整大小事件

编辑：删除边距也可能有所帮助。

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    display: block;
}

Answer 2

刚刚找到答案，实际上这是非常愚蠢的事情。

问题在于它们设置为 window.innerWidth 和 window.innerHeight 的宽度和高度。 我的图像质量非常高，所以基本上将 PIXI.Application 中的宽度和高度乘以 3 或 4 可以提高质量。

 const app = new PIXI.Application({ width: window.innerWidth*3, height: window.innerHeight*3, resolution: 1, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>