対応のためには次のポイントを対応します。
<meta name="viewport" content="・・・">
タグをいれ、ウェブページが拡大・縮小されないようにします。canvas
要素を画面全域に配置するようにします。
style
タグを使って、全画面化するための準備をします。<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
// 読み込みが終わってから初期化
window.addEventListener("load", init);
function init() {
// ・・・
}
</script>
<style>
canvas#myCanvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="myCanvas">
</canvas>
</body>
</html>
JavaScript側の制御にも設定が必要です。リサイズイベントresize
を検知して、canvas
要素のサイズを画面サイズにあわせます。
// ステージを作成
var stage = new createjs.Stage("myCanvas");
// リサイズイベントを検知してリサイズ処理を実行
window.addEventListener("resize", handleResize);
handleResize(); // 起動時にもリサイズしておく
// リサイズ処理
function handleResize(event) {
// 画面幅・高さを取得
var w = window.innerWidth;
var h = window.innerHeight;
// Canvas要素の大きさを画面幅・高さに合わせる
stage.canvas.width = w;
stage.canvas.height = h;
// 画面更新する
stage.update();
}
タッチ操作のためにタッチデバイス対応にも対応させておきましょう。
// ステージを作成
var stage = new createjs.Stage("myCanvas");
// タッチ操作をサポートしているブラウザーならば
if (createjs.Touch.isSupported() == true) {
// タッチ操作を有効にします。
createjs.Touch.enable(stage)
}