Twitter

canvasを全画面に表示する

2012/06/27 | html5 | コメント (4)

canvasをウィンドウサイズいっぱいの背景に固定したい場合や、フルcanvasのコンテンツを作成したい場合用のメモ。
canvasはjavascriptを利用してサイズ指定、リサイズ処理を行います。
※下記コードはjQueryの利用を前提に書いています。

【html】

<body>
<div id="wrapper">
<canvas id="main"></canvas>
</div>
</body>

【css】

body{
	margin: 0px;
	padding: 0px;
	position: relative;
}

body #wrapper{
	width: 100%;
	height: 100%;
	position: fixed;
}

【js】

$(function () {
	sizing();
	$(window).resize(function() {
		sizing();
	});
});

function sizing(){
	$("#main").attr({height:$("#wrapper").height()});
	$("#main").attr({width:$("#wrapper").width()});
}

どれもシンプルな記述で実装できます。
canvasを全画面にするにはhtmlとcssだけではうまくいかないので、このように#wrapperのサイズを取得してcanvasの幅と高さに指定するという方法をとります。


4件のコメント»

  1. 初めまして。
    フルスクリーン表示のcanvasを作ろうと思って、このページにたどり着きました。
    上記サンプルを使わせてもらって、canvasにlineToで線を描いたのですが、ブラウザをリサイズすると、線が消えてしまいます。
    ただ、リロードするとまた出てきますが、再度ブラウザをリサイズするとまた消えます。
    lineToで引いてるからかな?と思い、画像を配置してみたのですが、どうように消えます。

    調べてみたら、javascriptでブラウザ幅を取ってきて、リサイズする毎にcanvasのwidth,heightを設定すると、消える様です。(どうやらcanvasのwidth,heightが変更されるとダメになる模様。)
    初めからcanvasにwidth: 100%,height: 100%を設定して、html,body両タグにwidth: 100%,height: 100%を設定する手も試してみたのですが、線が妙に拡大されて使い物になりませんでした。

    リロードすればOKみたいなので、setTimeoutでlocation.reload(false)を設定して何とか誤魔化してますが、もし、リロードしないで済むよい方法があったらご教授いただきたいです。

    現象が現れた環境は、以下当方の環境です。
    OS:Windows Vista SP2
    ブラウザ:Firefox 14.0.1 , IE 9.0.8
    ドキュメント宣言:HTML5
    文字コード:UTF-8
    改行コード:CR+LF

    コメント by リョウ — 2012/08/07 @ 15:08
  2. >リョウさん
    はじめまして。コメントありがとうございます。

    現象を確認しました。
    リサイズ時の処理についてですが、描画する関数をリサイズ時にも呼ぶことで現象は解消されました。
    ※ページのロード時にcanvasに描画、リサイズ時に再描画というイメージです。

    具体的に試したのは以下のコードです。
    リロードは回線速度の問題や、表示の遅延等の負荷が予想されますので、
    再描画する方法をご検討してみてはいかがでしょうか。

    $(function () {
    
    	sizing();
    	draw();
    
    	$(window).resize(function() {
    		sizing();
    		draw();
    	});
    
    });
    
    function sizing(){
    	$("#main").attr({height:$("#wrapper").height()});
    	$("#main").attr({width:$("#wrapper").width()});
    }
    
    function draw() {
    	var canvas = document.getElementById("main");
    	var ctx = canvas.getContext('2d');
    
    	ctx.beginPath();
    	ctx.moveTo(20, 20);
    	ctx.lineTo(120, 20);
    	ctx.lineTo(120, 120);
    	ctx.lineTo(20, 120);
    	ctx.closePath();
    	ctx.stroke();
    }
    

    ※Windows 7 / Firefox 14.0.1 , IE 9.0.8での確認です。

    コメント by _atsuki — 2012/08/08 @ 12:56
  3. _atsukiさん

    ありがとうございます!
    ご教授いただいた方法で上手くいきました!

    私もリロードでは回線状況によって嫌な感じになってしまうことを懸念していました。

    …それにしても、とても基本的な事で直せるものでしたね(汗)
    お恥ずかしい限りです(汗)

    コメント by リョウ — 2012/08/08 @ 15:32
  4. >リョウさん
    いえいえ^^
    無事うまくいってよかったです^^

    コメント by _atsuki — 2012/08/08 @ 19:31

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top