今回は主にcanvasタグでフルスクリーン表示にするときなど、可変させる際の注意点をメモしておこうと思います。
canvasタグのサイズ設定について
canvasタグのサイズ設定は他のタグとは違いちょっと特殊です。
何故かというと、タグの内側であるcanvasの描画領域を考慮しないと思い通りの表示にならないからです。
どういうことかというと、
下記のようにcanvasタグを記述、それにcssでサイズの設定をするとcanvasに描画した内容は拡大されて表示されてジャギってしまいます。
<canvas id="canvas"></canvas>
#canvas{
width:600px;
height:300px;
}
これはcanvasにwidthとheightの属性が設定されていないせいです。
これが設定されていないと、htmlタグとしてはcssでサイズが設定されても、”canvas内側の描画領域”の幅と高さは変更されません。
あくまでcssが操作できるのはタグの装飾であり、canvasの機能にまではアクセスされないということでしょう。
ちなみに上記のように属性が設定されなかった場合のcanvas描画両機のデフォルト値は幅300px、高さ150pxです。なのでcssで上記のような設定をすると描画内容は2倍拡大されて表示されることになります。
拡大を防いで、意図通りの表示をするためには下記のように属性を設定すればよいです。
属性の設定をすれば描画領域もその分広がってくれます。
<canvas id="canvas" width="600" height="300"></canvas>
では、フルスクリーンで使うときは？
Webサイトにおいてフルスクリーンで使用する場合、たいてい幅や高さを100%に設定するかと思います。
これをcanvasにも設定してしまうと前述したように、拡大されてしまい意図した通りには表示されません。何もしなければwidth属性もheight属性も固定だからです。
だったらJavascriptを使って属性の値も可変にしてしまいましょう。
cssでの設定が幅と高さ100%なら、Javascriptでwindowの幅と高さを取得してその値をcanvasにセットしてあげればよいだけです。書き方は、まあ面倒だったらjQueryを使って書けばいいと思います。
あ、ちなみに、リサイズ時に取得し直す処理を忘れずに。
var theCanvas = document.getElementById('canvas');
function canvas_resize(){
var windowInnerWidth=window.innerWidth;
var windowInnerHeight=window.innerHeight;
theCanvas.setAttribute('width',windowInnerWidth);
theCanvas.setAttribute('height',windowInnerHeight);
}
window.addEventListener('resize',canvas_resize,false);
canvas_resize();
実際に使うとなると、ものによっては上記以外にも気をつけたほうがいい部分がたくさん出てくると思いますがcanvasのサイズ可変に関してはとりあえず上記でいいんじゃないかと思います。
おまけで、テキストを描画すrcanvasタグを可変にすると下記のようなコードになります。
<canvas id="canvas"></canvas>
#canvas{
background: #eea;
width: 100%;
height: 100%;
}
var theCanvas = document.getElementById('canvas');
function canvas_resize(){
var windowInnerWidth=window.innerWidth;
var windowInnerHeight=window.innerHeight;
theCanvas.setAttribute('width',windowInnerWidth);
theCanvas.setAttribute('height',windowInnerHeight);
canvasApp();//追加分
}
window.addEventListener('resize',canvas_resize,false);
canvas_resize();
//以下追加分
function canvasApp(){
var context=theCanvas.getContext('2d');
function drawScreen(){
//テキスト
context.fillStyle='#aa9999';
context.font='40px _sans';
context.textBaseline='top';
context.fillText('Hello world!',195,80);
}
drawScreen();
}
window.addEventListener('load',canvasApp,false);
