118 lines
4.0 KiB
HTML
118 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<title>PIXI Application Resolution Doctest</title>
|
|
|
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
|
<link rel="stylesheet" href="../../css/doctest.css">
|
|
|
|
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
|
<script src=".././3rdparty/all.js"></script>
|
|
|
|
<script src=".../../dist/iwmlib.pixi.js"></script>
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
|
|
<style>
|
|
#dpi {
|
|
height: 1in;
|
|
left: -100%;
|
|
position: absolute;
|
|
top: -100%;
|
|
width: 1in;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="Doctest.run()">
|
|
<h1>Application Resolution</h1>
|
|
<p>
|
|
This is a doc test page to examine the width and height of canvas elements at different resolutions.
|
|
</p>
|
|
<p>Further documentation:</p>
|
|
<ul>
|
|
<li><a href="https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html">WebGL Fundamentals</a></li>
|
|
<li><a href="https://www.khronos.org/webgl/wiki/HandlingHighDPI">Handling High DPI</a></li>
|
|
</ul>
|
|
<p>Device properties:</p>
|
|
<ul>
|
|
<li id="dpi-result">Your screen has <span></span> dpi.</li>
|
|
<li id="dpr-result">Your screen has a device-pixel-ratio of <span></span>.</li>
|
|
</ul>
|
|
<p>
|
|
Set width and height per CSS: <input type="checkbox" />
|
|
</p>
|
|
<script>
|
|
let scaled = false
|
|
$('input[type="checkbox"]').click(function(e) {
|
|
if ($(this).prop('checked')) {
|
|
$('#canvas1').css({width: '100px', height: '100px'})
|
|
$('#canvas2').css({width: '100px', height: '100px'})
|
|
$('#canvas3').css({width: '100px', height: '100px'})
|
|
$('#canvas4').css({width: '100px', height: '100px'})
|
|
} else {
|
|
$('#canvas1').css({width: 'auto', height: 'auto'})
|
|
$('#canvas2').css({width: 'auto', height: 'auto'})
|
|
$('#canvas3').css({width: 'auto', height: 'auto'})
|
|
$('#canvas4').css({width: 'auto', height: 'auto'})
|
|
}
|
|
})
|
|
</script>
|
|
<p>Let's look at some canvas resolution examples:</p>
|
|
|
|
<div id="dpi"></div>
|
|
|
|
<script>
|
|
$('#dpi-result span').text(document.getElementById("dpi").offsetHeight)
|
|
$('#dpr-result span').text(window.devicePixelRatio)
|
|
</script>
|
|
|
|
<script>
|
|
const style = new PIXI.TextStyle({
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold',
|
|
fill: ['#ffffff', '#00ff99'],
|
|
stroke: '#4a1850',
|
|
strokeThickness: 5,
|
|
wordWrap: true,
|
|
wordWrapWidth: 440
|
|
})
|
|
</script>
|
|
|
|
<canvas id="canvas1" class="interactive"></canvas>
|
|
<script class="doctest">
|
|
const app1 = new PIXI.Application({width: 100, height: 100, resolution: 1, backgroundColor : 0xf8ce2d, view: canvas1})
|
|
const text11 = new PIXI.Text('AaBb12')
|
|
const text12 = new PIXI.Text('IWM', style)
|
|
text12.y = 30
|
|
app1.stage.addChild(text11, text12)
|
|
</script>
|
|
|
|
<canvas id="canvas2" class="interactive"></canvas>
|
|
<script class="doctest">
|
|
const app2 = new PIXI.Application({width: 100, height: 100, resolution: 2, backgroundColor : 0xfd6b6a, view: canvas2})
|
|
const text21 = new PIXI.Text('AaBb12')
|
|
const text22 = new PIXI.Text('IWM', style)
|
|
text22.y = 30
|
|
app2.stage.addChild(text21, text22)
|
|
</script>
|
|
|
|
<canvas id="canvas3" class="interactive"></canvas>
|
|
<script class="doctest">
|
|
const app3 = new PIXI.Application({width: 100, height: 100, resolution: 3, backgroundColor : 0x40c3f2, view: canvas3})
|
|
const text31 = new PIXI.Text('AaBb12')
|
|
const text32 = new PIXI.Text('IWM', style)
|
|
text32.y = 30
|
|
app3.stage.addChild(text31, text32)
|
|
</script>
|
|
|
|
<canvas id="canvas4" class="interactive"></canvas>
|
|
<script class="doctest">
|
|
const app4 = new PIXI.Application({width: 100, height: 100, resolution: window.devicePixelRatio, backgroundColor : 0xd7a3f9, view: canvas4})
|
|
const text41 = new PIXI.Text('AaBb12')
|
|
const text42 = new PIXI.Text('IWM', style)
|
|
text42.y = 30
|
|
app4.stage.addChild(text41, text42)
|
|
</script>
|
|
</body>
|