前回の <canvas>を画面中央に表示する で、CSSには「見た目」や「レイアウト」の役割を、JavaScriptには「動作」「ロジック」の役割をそれぞれ分担して担わせた方がパフォーマンスが上がるよという助言をAIから得たわけですが、それでも出来上がったコードは役割を完全に分業にできていたわけではありませんでした。
今回は、複数の<canvas>を完全にCSSでレイアウトできるかどうか、そしてできたとしてパフォーマンス的にどうなのかを考えてみたいと思います。
各要素を<div>で囲む
Javascriptでふるまいを決める際には、canvas関連のサイズ指定が必要になるため、canvas関連のサイズは高さ幅ともにすべて「100％」として扱い、それを取り囲んでいる<div>要素の高さや幅をCSSでコントロールすることで様々なデバイスサイズに対応させる方法を試してみます。
<body>
<div id="main_container">
<div class="canvas_box"><canvas id="canvas"></canvas></div>
<div class="message_box"><canvas id="message"></canvas></div>
</div>
</body> <style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #333;
}
canvas {
display: block;
margin:0;
padding:0;
vertical-align: bottom;
line-height: 1.0em;
}
@media screen and (min-width:769px) {
#main_container {
width: 1024px;
height: 768px;
}
.canvas_box { height: 90%; }
.message_box { height: 10%; }
}
/* タブレットの場合 */
@media (max-width: 1023px) and (orientation: landscape) {
#main_container {
width: 100%;
height: 100%;
}
.canvas_box { height: 80%; }
.message_box { height: 20%; }
}
/* スマートフォンの場合 */
@media (max-width: 1023px) and (orientation: portrait) {
#main_container {
width: 100%;
height: 100%;
}
.canvas_box { height: 75%; }
.message_box { height: 25%; }
}
</style><script>
const gCanvas = document.getElementById('canvas');
const ctx_canvas = gCanvas.getContext("2d");
gCanvas.style.width = '100%';
gCanvas.style.height = '100%';
ctx_canvas.fillStyle = "green";
ctx_canvas.fillRect(0, 0, gCanvas.width, gCanvas.height);
//----------
const gMessage = document.getElementById('message');
const ctx_message = gMessage.getContext("2d");
gMessage.style.width = '100%';
gMessage.style.height = '100%';
ctx_message.fillStyle = "blue";
ctx_message.fillRect(0, 0, gMessage.width, gMessage.height);
</script>なんとなく考えているものができました。
これでcanvasの中身が思惑通りに動かせるのかがまだ分からないので、これをベースにいろいろ試したいと思います。
Reply