<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PIXI Resolution Doctest</title> <script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script> <style> body { padding: 0; margin: 0; width: 100%; height: 100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script class="doctest"> const app = new PIXIApp({ view: canvas, fpsLogging: true, transparent: false }) app.setup() app.run() const textProps = {fontSize: 72, fill: 0xffffff} Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => { app.stage.removeChildren() let sprite = null let label = null if (key === '1') { sprite = PIXI.Sprite.from('resolution/image-4k.jpg') label = `4096 * 2732 ~ 4K` } else if (key === '2') { sprite = PIXI.Sprite.from('resolution/image-8k.jpg') label = `7952 * 5304 ~ 8K` } else if (key === '3') { const texture = PIXI.Texture.from('resolution/video-1k.mp4') texture.baseTexture.resource.source.loop = true sprite = new PIXI.Sprite(texture) label = `1920 * 1080 = 1K` } else if (key === '4') { const texture = PIXI.Texture.from('resolution/video-4k.mp4') texture.baseTexture.resource.source.loop = true sprite = new PIXI.Sprite(texture) label = `3840 * 2160 = 4K` } else if (key === '5') { const texture = PIXI.Texture.from('resolution/video-8k.mp4') texture.baseTexture.resource.source.loop = true sprite = new PIXI.Sprite(texture) label = `7680 * 4320 ~ 8K` } app.stage.addChild(sprite) // texts //-------------------- const shortcuts = new PIXI.Text(`Press 1 - 5 to change Sprites`, textProps) shortcuts.x = 100 shortcuts.y = 100 const width = new PIXI.Text(`Width: ${app.renderer.width}`, textProps) width.x = 100 width.y = shortcuts.y + shortcuts.height * 2 const height = new PIXI.Text(`Height: ${app.renderer.height}`, textProps) height.x = 100 height.y = width.y + width.height + 10 const resolution = new PIXI.Text(`Resolution: ${app.renderer.resolution}`, textProps) resolution.x = 100 resolution.y = height.y + height.height + 10 const devicePixelRatio = new PIXI.Text(`devicePixelRatio: ${window.devicePixelRatio}`, textProps) devicePixelRatio.x = 100 devicePixelRatio.y = resolution.y + resolution.height + 10 const text = new PIXI.Text(label, textProps) text.x = 100 text.y = devicePixelRatio.y + devicePixelRatio.height * 2 app.stage.addChild(shortcuts, width, height, resolution, devicePixelRatio, text) }) Mousetrap.trigger('1') </script> </body> </html>