Canvasのレスポンシブデザイン対応

最近Canvasを使ったゲームを作成したのでその時に知った技をひとつ紹介します。

CanvasはCSSのwidthやheightにパーセントを指定できないので、CSSだけではレスポンシブデザインに対応できないのです。
そこでJavascriptとの連携でこれを解決する方法がこちら。

まずHTMLには、基準となるCanvasのサイズをピクセル単位で指定します。
このサイズは例えばCanvasの最大サイズであったり、Javascriptで扱いやすいキリのよい数字だったりなんでもオッケーです。
また.containerの横幅ををCSSにて可変サイズにします。

<div class="container">
  <canvas class="canvas" width="600" height="600"></canvas>
</div>

そしてJavascriptを以下のように記述します。

$(window).load(function(){
  container = $('.container');
  canvas = $('.canvas');

  function resizeCanvas(){
    canvas.outerWidth(container.width());
    canvas.outerHeight(container.width() * 1.0);  //1.0は適宜変更
  }
  resizeCanvas();
  $(window).on('resize', resizeCanvas);
});

この記述によりCanvasのサイズが、親要素である.containerに追従して変化するようになります。

このサイズを変更したCanvasでのタップやクリックの座標の取得の仕方は別の記事で！weboji.hatenablog.com