【HTML/JavaScript】よくある canvas要素のフルスクリーン対応【テンプレート付】

おつかれさまです。

記事の前に、まずはにゃんこ成分を充電します ( ˙꒳˙ )

f:id:herrscherinnen:20190424191332j:plain

すこし大人っぽく写ったかな?

canvas とは

canvas要素は、JavaScript で画像や図形を描画できる HTML要素です。

例えば、動画やカメラ映像を取り込んで加工したり、ゲームを作ったりできます。

詳しくはこちら。

ja.wikipedia.org

canvas要素では、画像やアニメーションが使えることがわかりました。

画像やアニメーションを使うときは、それを画面いっぱいに表示したいことがあります。

結構あります。

_{たとえば、動画を再生するプレーヤーは、ほぼフルスクリーンにする機能があります}

大きさを設定するには

canvas要素には、widthとheightという属性があり、HTML内での描画可能な領域になります。

width は要素の横幅、height は要素の高さを示してます。

_{canvas の大変さを説明するために、}

例えば、img要素を横幅いっぱいにするには、
width を 100% にすることで実現できます。

詳しくはこちら。

www.sejuku.net

簡単です。

ですが、canvas のサイズ( width と height )は、固定値しか使えず、
簡単に画面いっぱいに表示することはできません ↷( ó╻ò)

毎回こまるので、ここに記録します。

やること

canvas の縦横比を崩すことなく、canvas ができるだけ大きくなるよう拡大縮小します。
canvas の縦横比が画面と異なる場合、空き領域が上下または左右で同じになるように canvas を中央に配置します。

やったこと

これで canvas をフルスクリーンで表示できるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<style>
html, body {
  height: 100%;
  margin: 0;
}

#canvas {
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -480px; // canvas の width/2
  margin-top: -360px; // canvas の height/2
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var canvas = document.getElementById('canvas');
  var styles = canvas.getAttribute('style') || '';
  var context = canvas.getContext('2d');

  // canvasが見えるように、色を付けます
  context.fillStyle = 'rgba(0,0,16, 0.66)';
  context.fillRect(0, 0, canvas.width, canvas.height);

  var onResize = canvas => {
    var scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
    var transform = 'scale(' + scale + ',' + scale + ');';

    canvas.setAttribute('style', styles + 
      '    -moz-transform: ' + transform + 
      '     -ms-transform: ' + transform + 
      '      -o-transform: ' + transform + 
      '         transform: ' + transform + 
      ' -webkit-transform-origin: center center;' +
      '    -moz-transform-origin: center center;' +
      '     -ms-transform-origin: center center;' +
      '      -o-transform-origin: center center;' +
      '         transform-origin: center center;'
    );
  }

  onResize(canvas);
  window.addEventListener('resize', () => onResize(canvas), false);
});
</script>
</head>
<body>
  <canvas id="canvas" width=960 height=720 style="position: relative; left: 50%; margin-left: -480px; top: 50%; margin-top: -360px;">
  </canvas>
</body>
</html>