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