児童書のおすすめ本59選

JavaScript:キャンバスのサイズを画面サイズにあわせて変更

JavaScript:キャンバスのサイズを画面サイズにあわせて変更

HTMLのcanvasタグは、JavaScriptで気軽に画像やグラフィックを扱うことができて面白いので色々と試している。
個人的に作っているものの中で、canvasタグのサイズをブラウザの画面サイズにあわせて変更したいことが多いので、サンプルを作った。

サンプルを見る

キャンバスに画像を画面いっぱいに表示します

ポイント

HTML部分

canvasタグは、divタグでくくっておく。(divタグに内包するのが1番のポイント
canvasタグの幅と高さは指定しなくて大丈夫です。起動時にJavaScriptプログラム側で変更します。



<div id="wrapper">
	<canvas id="canvas" width="" height=""></canvas>
</div>


CSS部分

canvasのdisplayはblockにして、html, bodyとcanvasタグを内包したdivタグ要素は幅・高さを100%にしておく。

#canvas{
	display: block;
}
html, body, #wrapper{
	width: 100%;
	height: 100%;
}

JavaScript部分

キャンバスのサイズを再設定する際に、divタグ側のoffsetWidthとoffsetHeightを指定するようにする。

canvas.width = wrapper.offsetWidth;
canvas.height = wrapper.offsetHeight;

プログラム全体

サンプルのプログラムでは、ウィンドウのリサイズイベントが発生した際に上記の処理を行っています。
こうすることで常にキャンバスが画面いっぱいに表示されることになります。

以下にサンプルプログラム全体を示します。

サンプルでは、画面いっぱいに指定した画像ファイルを表示しています。(画像の絵柄が見苦しいのはわたしの絵心によるものなのでお許し下さい!)

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=yes">
	<script src="main.js"></script>
	<title>キャンバスのサイズを画面サイズに合わせて変更</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#canvas{
			display: block;
		}
		html, body, #wrapper{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<canvas id="canvas" width="" height=""></canvas>
	</div>
</body>
</html>

main.js

/*
 * グローバル変数
 */
var wrapper = null;				// キャンバスの親要素
var canvas = null;					// キャンバス
var g = null;						// コンテキスト
var $id = function(id){ return document.getElementById(id); };	// DOM取得用
var img = new Image();			//画像用

/*
 * 定数
 */
var IMG_COOLMAN = "coolman.png";

/*
 * キャンバスのサイズをウインドウに合わせて変更
 */
function getSize(){
	// キャンバスのサイズを再設定
	canvas.width = wrapper.offsetWidth;
	canvas.height =  wrapper.offsetHeight;
	// 画像を表示
	g.drawImage(img, 0, 0, canvas.width, canvas.height);
}

/*
 * リサイズ時
 */
window.addEventListener("resize", function(){
	getSize();
});

/*
 * 起動処理
 */
window.addEventListener("load", function(){
	// キャンバスの親要素情報取得(親要素が無いとキャンバスのサイズが画面いっぱいに表示できないため)
	wrapper = $id("wrapper");
	// キャンバス情報取得
	canvas = $id("canvas");
	g = canvas.getContext("2d");

	// キャンバスをウインドウサイズにする
	getSize();
	
	// 画像生成
	img.src = IMG_COOLMAN;
	img.onload = function(){
		g.drawImage(img, 0, 0, canvas.width, canvas.height);
	};
});

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA