Canvasをサイトの背景にしよう1
●Canvasのサイズをブラウザ ウィンドウサイズと一致させる
背景のグラデーションは、前回の「[69-11] canvasでビットマップを操作しよう」のサンプル1のソースをそのままコピペで使っています。
Canvasは、CSSの「width:100%; height:100%;」ではウィンドウサイズにできず、下記サイトを探し当てました。jQueryを使う方法です。
Atsuki Tairaさんの「2CRAVITY」- canvasを全画面に表示する
div#wrapper の中に canvasをすっぽりといれてしまい、div#wrapperはCSSでサイズをbodyに対して100%に。
Canvasのサイズは、このdiv#wrapper のサイズを javaScriptで受け取ります。
Javascriptはこちら。
// ページをロードしたりウィンドウのリサイズするたびに実行
$(function () {
sizing();
Draw();
$(window).resize(function() {
sizing();
Draw();
});
});
// div#wrapperからcanvas#cnvsのサイズをもらう(#wrapperのサイズはCSSで)
function sizing(){
$('#cnvs').attr({height:$('#wrapper').height()});
$('#cnvs').attr({width:$('#wrapper').width()});
};
// ここからは前回(ImageData)のサンプル1と同じです。
function Draw() {
var ctx = document.getElementById('cnvs').getContext('2d');
var imageData = ctx.createImageData(cnvs.width, cnvs.height);
var width = imageData.width, height = imageData.height;
var imgd = imageData.data;
for (var y = 0; y < height; ++y) {
for (var x = 0; x < width; ++x) {
var base = (x+y*width)*4;
imgd[base+0] = 255*x/width;
imgd[base+1] = 255*y/height;
imgd[base+2] = Math.max(255-x-y,0);
imgd[base+3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
};
HTMLはこちら。
ウィンドウサイズの取得、リサイズのために jQueryを使いますので、<header>でjQueryを読み込みます。
<body>
<div id="wrapper"><canvas id="cnvs"></canvas></div>
<div id="container"> <!--ここにコンテンツ--> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script><!--ここにcanvas用のスクリプト--></script>
</body>
CSSはこんなかんじにしてみました。
(ほかにも z-index を使う方法などあります。サイトのレイアウトに合わせてみてください。)
このサンプルページでは、#wrapperをフルサイズにして「position: fixed」に。
コンテンツが入る #containerは position: absolute にしています。
body{
width:100%;
margin: 0;
padding: 0;
color: rgba(0,0,0,0.7);}
body #wrapper{
width: 100%;
height:100%;
min-height:100%;
overflow: hidden;
position: fixed;}
#container {
position: absolute;
top:0;
right:20px;
left:20px;}