ほんっとにはじめてのHTML5とCSS3：[69-12] Canvasをサイトの背景に使おう

[69-12] Canvasをサイトの背景に使おう

最終更新日：2019年02月06日　（初回投稿日：2015年03月20日）

ここまで Canvasの基本をいろいろやってみましたが、実際に「Canvasを何に使うか」を考えると、デザイナー的にはサイトの背景に使ってみたいですよね。やっぱり。

これってウィンドウサイズと Canvasサイズを一致させて、一番下に敷くことですよね。それさえできればこっちのもんだ！と試行錯誤した結果をご覧ください。

本日のINDEX

Canvasのサイズをウィンドウサイズと一致させる（サンプル1）
CanvasをjavaScriptで生成する方法（サンプル2）
Canvasに画像（PNG）をランダムに描いて背景にする（サンプル3）

今回のサンプルは、3ファイルに分かれています。

サンプル1

まずは Canvasをサイトの全面に貼付けて背景として使うスタンダードな方法（たぶん）です。
CSSでは Canvasをウィンドウサイズぴったりにできなかったので、javaScriptでウィンドウサイズに合わせています。

サンプル2

canvas要素とそれを内包するdiv要素を、javaScriptで生成する方法です。
既存サイトの背景に Canvasを使うために、なるべく省力化できないかと考えてみました。<body>内には canvas要素を書かなくてOK。

サンプル3

これはサンプル2と同じ方法で Canvasを生成しています。
違いは drawImage() で画像を使っていること。
画像なら、画像ファイルを差し替えるだけで後の変更が簡単になるのでサンプルを作ってみました。

Canvasのサイズをウィンドウサイズと一致させる

サンプル1

Canvasをサイトの全面に貼付けて、背景として使います。
サンプル1の描画部分は、前回の
「[69-11] Canvasでビットマップを操作しよう」のサンプル1（グラデーション）のソースをそのまま使っています。

canvas要素をウィンドウサイズぴったりにするには、てっきりCSSの「width:100%; height:100%;」でいけるんだと思っていましたが、ダメなんですね。
ただの何も描画の無いcanvas要素（CSSで背景色を着けただけの）ならいけそうに思えたんだけど、描画コンテキストがあるとダメ。まっ白。

で、javaScriptでサイズ取得するんだわ...とソース探しまくり（非エンジニアなので）、いろいろ見た結果、Canvasの親要素にdivを用意し、そのdivはCSSでフルサイズ指定。Canvasサイズはその親のdivから取得するのがいいみたいです。

たくさんのソースを試行錯誤しましたが、バッチリだったのがこちらです。
Atsuki Tairaさんの「2CRAVITY」- Canvasを全画面に表示する
ソースもシンプルでわかりやすい！ jQueryを使う方法です。
（おかげで理解も深まりました。ありがとうございます！）

CSS3の単位 vw, vh を試してみた→ダメでした...

canvasのサイズは「width:100vw; height:100vh でいいんじゃない」という情報をいただき、試してみました。
サイズ取得はコレでできたのですが、描画部分がボケボケに。描画のピクセル単位がビューポートに対する割合になるのか？ハッキリ原因はわからないのですが、どうにも調整できず、あきらめました。
サンプルはこちら↓です。ご興味ある方はご覧ください。
番外編：Canvasのサイズを CSS3の「vw」「vh」で取得してみたサンプル

HTMLとCSSの準備

まず、HTMLはこのように、div#wrapper の中に canvas#cnvsをすっぽりといれておきます。場所は<body>の直下。1番最初に書いておきます。
Canvasにもidをつけておきます。javaScriptでサイズ取得の時にこのidを使うので。

<body>
<div id="wrapper"><canvas id="cnvs"></canvas></div>
<div id="container"> <!--ここにコンテンツ--> </div>
</body>

CSSも整えておきます。div#wrapperはCSSでサイズをbodyに対して100％に。
このdiv#wrapper のサイズを、後ほど javaScriptで取得して Canvasのサイズにします。
以下は CSSの必須部分のみ書いておきます（詳細はサンプルに）

body{
	width:100%;
	margin: 0;
	padding: 0;}
body #wrapper{
	width: 100%;
	height:100%;
	min-height:100%;
	overflow: hidden;
	position: fixed;}
#container {
	position: absolute;
	top:0;
	right:20px;
	left:20px;}

ページのコンテンツが入る div#containerは、このサンプルでは「position: absolute;」を使っていますが、ご自分のページに合ったスタイルで指定してください。
#wrapperや canvasよりも、#containerが上に乗っかるようにするのが目的です。
例えば「z-index」を使って、#wrapperや canvasが「z-index:1」なら #containerを「z-index:2」にする、などの方法もありだと思います。

Canvasにウィンドウサイズを取得する

javaScriptで、ロード時とリサイズ時の functionを書いていきます。

// ページをロードしたりウィンドウのリサイズするたびに実行
$(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()});
};

3、4行目に、sizing() と Draw() の2つの functionを書いていますが、
これは「ページをロードしたときに、この2つを実行」という指令。
functionは1つにまとめたほうが良かったかも。その方法はサンプル2で使っています。

5〜8行目は、ウィンドウをリサイズしたときに、同じく2つを実行させます。

11行目からは、サイズ取得の関数 sizing()　を書いています。
idで要素をピックアップしています。「cnvs」というid名のモノ（canvas要素）を「wrapper」というid名のヤツと同じ高さや幅にする、という指定です。
div#wrapperにはCSSで縦横ウィンドウサイズぴったりにしていますので、これで Canvasもウィンドウサイズぴったりになるというわけ。
（divを介さずにはできない（Canvas は CSSで100％指定できない）ので、こうなったわけです。）

このソースで、頭に $（ドルマーク）がついているのって何だろう？と思ったんですが、これは jQueryを利用しているってことなんだって。（いまごろスミマセ〜ン。知らんかった）
「 $(function () { } ) 」と「 jQuery(function () { } ) 」は同じことなんだそうです。

というわけで！ Canvas用の JavaScriptより前に jQueryを読み込んでおくのを忘れずに。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!--このあとに上記のcanvas用のjavaScriptを入れていきます-->

注：このjQuery↑は本記事を書いた2015年当時のもの。古いです。動くけど（2019年2月記）

Canvasへの描画

Canvas用のjavaScriptの続き。サイズ取得ソースの後に、Canvasに描画するのソースを書きます。
これは前回のサンプル1のソースをそのまま使用。説明は省略します。

// ここからは前回（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);
};

これで、ブラウザウィンドウの全面に Canvasが広がり、サイトの背景になりました。
ウィンドウをリサイズしても、それに合わせて描画し。スマホで縦から横にしても、ちゃんとリサイズします。

CanvasをjavaScriptで生成する方法

サンプル2

サイトの全面に背景としてCanvasを使うことはできましたので、今度は、Canvasと、それを囲む divを、javaScriptで生成してみました。

「既にあるサイトの背景に Canvasを使いたい」という時に、jsファイルだけ作って<head>に置けば実現するようにしたいな〜と思い、考えてみました。

これは、javaScriptを書く順番が重要になります（はまっちゃった。笑）

まず canvas要素とそれを囲む div要素を生成する
div要素には idをつけ、CSSでフルサイズに指定しとく。（ jsでスタイル指定も可）
canvas要素のサイズを取得（div要素から取得する）
最後に Canvasに描画

こうやって↑書いてみると、当たり前のことなんですがね。
3の「サイズ取得」の前に、必要な要素ができてなければ、ブラウザはどっからサイズを取ってくればいいかわからず。（デフォサイズ（300×150px）のちっちゃいCanvasはできたよ。笑）

HTMLとCSSの準備

サンプル1と違って <body>に canvas要素や、それを囲む divは不要。jQueryだけは忘れずに。

<body>
<div id="container"> <!--ここにコンテンツ--> </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script><!--ここにCanvas用のスクリプト--></script>
</body>

CSSはサンプル1のCSSと同じです。
Canvasを囲む divのCSSも、あとで javaScriptで id（#wrapper）をつけて使いますよ。

javaScriptで新しくcanvasとdivを作る

サンプル1では、関数を sizing() と Draw() に分けていましたが、今回はこれだとやりにくいので1個にまとめて「Draw()」だけにしました。
冒頭のロードとリサイズに対しての指令部分は同じ。指定した関数が1個になっただけ。

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

つづいて、関数 Draw() を書いていきます。

//ここからロード時・リサイズ時の処理
function Draw() {
  // bodyを親とするノード内で、新しくcanvasとdivを作る
  var bodyNode = document.getElementsByTagName('body').item(0);
  var containerNode = document.getElementById('container');
  var newCanvas = document.createElement('canvas');
  var newDiv = document.createElement('div');
  // 新しく作ったdivのidの指定
  newDiv.id = 'wrapper';

まず、生成するdiv（とその中に入れるcanvas）を置く場所（親ノード）になる body要素を指定してあげます。これは要素名（TagName）で指定。（10行目）
次に、生成するdiv（とその中に入れるcanvas）を div#container の上に置きたいので、その対象のノードも指定します。これはid名で指定しています。（11行目）
（ノード（node）についてはすぐ下の「DOMとノード」に）
次に createElement で canvas要素と div要素をクリエイト（生成）。（12、13行目）
で、div要素はほかにもあるので、区別するために id名をつけといてあげます（15行目）
（canvasは1個だけなのでこのままでOK。ただし jsやCSSでなんかしたいならidつけて）

●javaScriptでのスタイル指定（今回は使ってませんが、知識として一応メモっときます）
今回は新しく作ったdivにidをつけて、そのidでCSSを指定する方法でやりますが、
javaScriptでスタイルの指定をする事もできます。今回のヤツならこんなふうにします。

	newDiv.style.width = 100 + '%';
	newDiv.style.height = 100 + '%';
	newDiv.style.overflow = 'hidden';
	newDiv.style.position = 'fixed';

●DOMとノード
javaScriptでHTMLの要素を生成したり、それを場所を指定して挿入するときは、DOM（Document Object Model）という仕組みを使います。要素の位置関係というか親子兄弟関係の構成をDOMっていうみたい。DOMでは各要素のことをノード（node）といいます。
（DOMの詳細は割愛！ iframeの記事の「sandbox属性」でちょっと触れているけど、私も雰囲気でしか理解していないので〜）

今回は、bodyにぴったりの Canvasを作りたいので、bodyを親とするノード内に Canvasとそれを囲む divを作るわけです。
ですので「こいつが親ノードだよ」とjavaScriptでちゃんと書いとかないと、ブラウザはどこに置けばいかわからずミッション放棄。なにも起こりません。
最初から親ノードの中に javaScriptを書く方法なら略してもいいけど、今回は外部 jsファイルにして使える方法を考えているので、この親ノード指定は必要でした。

また、.getElementById('container') については（11行目）、後ほど「insertBefore(○,●)」というメソッドを使いますが、これは「●の前に○を挿入する」というもの。なので対象になるノード（●）もここで指定しておく必要があります。（使うのは真下↓のソースの19行目ね）

新しく作ったdivの中に Canvasを入れ、位置を指定して生成する

上のソースまでで、新しくcanvas要素と div要素を作りました。（作っただけで、まだ宙に浮いたような状態です）つぎはそれらを目的の位置に挿入します。

// 新しく作ったdivの中にcanvasを入れる
  newDiv.appendChild(newCanvas);
  // 新しく作ったdivを#containerの前に挿入する
  bodyNode.insertBefore(newDiv, containerNode);

appendChildメソッドで、新しく作ったcanvas（変数newCanvas）を、新しく作ったdiv（変数newDiv）の中に入れます。（17行目）
appendChild は、親ノードの中に既に他の要素がある場合は、一番最後（末尾）に挿入します。
今回新しく作ったこの divには canvasしか入らないのでこれでOKね。（ほかに何か入るんだったら、もっとソースがややこしくなっていきます...）

で、19行目が insertBeforeメソッドを使った「親ノードの中の●ノードの直前に○を挿入」という指令。bodyが親のノード（変数bodyNode）の中の div#container（変数containerNode）の直前に、div#wrapper（変数newDiv）を入れるように指示しました。
これで、divとcanvasの生成と挿入は完了です。
このあと canvasにサイズを取得させます。

Canvasにウィンドウサイズを取得する

これは、サンプル1と同じサイズ取得のソースですが、
今回は canvas要素には idを指定しないので要素名canvasで指定。
divには id「wrapper」をさっきつけてやったので、そのidで指定しています。

  // canvasのサイズを新しいdivからもらう
  $('canvas').attr({height:$('#wrapper').height()});
  $('canvas').attr({width:$('#wrapper').width()});

Canvasへの描画

最後に Canvasへ描画します。

  // Canvasへの描画
  var ctx = newCanvas.getContext('2d');
  // 以下省略します。詳しくはサンプルで

25行目の描画コンテキストの指定ですが、
これまでは、
var ctx = document.getElementById('cnvs').getContext('2d');
って canvasを id名で指定していましたが、
今回は canvasを変数（var newCanvas）で設定していますので、それを使ってます。

描画部分のソースは、ethertankさんの「Digital Clock」の時計の「背景」部分のソースを参考にさせていただきました。
これはラインをランダムに描画したもので、ソースはシンプルだけどいろいろアレンジができますね。
元のソースからいろいろ変更させていただいてますが、詳細はサンプルのほうでご覧ください。

また、Canvasでのラインの書き方の詳細は、
「[69-3] Canvasにいろんな曲線を描こう（線のスタイルも）」をご覧ください。
ラインの起点・終点をランダムにして描画していますが、これは乱数を発生させています。
乱数については「[69-6] Canvasにマウスの動きに合わせて描画しよう - Math.random() について」をご覧ください。

Canvasに画像（PNG）をランダムに描いて背景にする

サンプル3

これはサンプル2と同じ方法で Canvasを生成していますが、違いは 画像を使っていること。

これは便利です。画像サイズを変えてもOKなように作ったので、画像ファイルを差し変えるだけで、背景イメージをガラッと変換できます。（バックグラウンドのグラデーションも多少変える必要はあるかも）

また、このサンプルは、描画用の javaScriptを外部ファイルにしてみました。基本的にHTMLの <head>部分に長過ぎるコードがある場合は外に出してスッキリさせるほうが良いので。詳細はサンプルで。

あらかじめ画像を用意して、それらをランダムな位置と回転で描画しています。
このサンプルでは、以下の5つのPNGファイルを用意しました。

1つの画像に対して「ランダム位置とランダム回転を指定して○○コ描画する」という指定を、5回繰り返しています。すべて同じ個数で描画するなら、共通部分をまとめて書く方法があるのでしょうけど。それが javaScript初心者には思いつかず...。
ただ、この書き方にもメリットあり。1つ1つの画像に対して個別に指定ができるので、画像によって描画個数をかえたりできます。
（サンプルでは、赤い花は20個、葉っぱとつぼみは30個、その他は10個を描画しています）

画像を回転させるために setTransform() を使っています。
for文の中で複数の画像をランダムに回転させるのは setTransform() じゃないと無理。rotate() では、すべての画像が同じ回転になってしまう。saveやrestoreがここでは使えないから。
で、回転（rotate() ）を setTransform() に置き換えるにはどうすればいいかを、いろいろ探しまわって、こちら↓のソースを見つけ、参考にさせていただきました。（ですので解説は無理。すみません）
「JavaScript：雪が降る（Canvasで複数画像を回転） | 人生は読めないブログ」
こちらは↑雪の結晶がユレながら回転しながら降りてくる素敵なアニメーションです。

乱数については「[69-6] Canvasにマウスの動きに合わせて描画しよう - Math.random() について」をご覧ください。
回転については「[69-9] Canvasでグラフィックスの変形をしよう」をご覧ください。
画像を描画する drawImage() については「[69-4] Canvasに画像を描画しよう」をご覧ください。

Canvasで画像をランダムに描くサイト背景をWordPressで使ってみた

サンプル3の「画像をランダムに配置」する方法を、WordPressサイトで使ってみました。
こちらのサイトです。
＊Web Design 覚え書き＊

WordPressでCanvas背景を使用したメモは、こちらにまとめています。
canvasでWordPressサイトの背景に画像をランダムに配置する | ＊Web Design 覚え書き＊

WordPressならではの注意点（jsでの画像のパスは絶対パスで）や、レスポンシブレイアウトの場合の注意点、問題点なども書いていますので、WordPressで使いたい場合はぜひ見てみてください。

次回予告

いかがでしたか？　Canvasをウィンドウサイズにするコツさえ理解すれば、いくらでも応用がききますね。これはオモシロイ！

ところで、Canvas上の内容をURL文字列で取得することもできるんです。
デフォルトではPNGファイルとして文字列を取得し、それを img要素に書き出すなどの操作もできます。というわけで、次回は Canvas で画像データをURL文字列として取得してみます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-02-06（Wed）│
投稿日：2015-03-20（Fri）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿

Pagetop ↑

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

ほんっとにはじめての HTML5 と CSS3

[69-12] Canvasをサイトの背景に使おう

Canvasのサイズをウィンドウサイズと一致させる

HTMLとCSSの準備

Canvasにウィンドウサイズを取得する

Canvasへの描画

CanvasをjavaScriptで生成する方法

HTMLとCSSの準備

javaScriptで新しくcanvasとdivを作る

新しく作ったdivの中に Canvasを入れ、位置を指定して生成する

Canvasにウィンドウサイズを取得する

Canvasへの描画

Canvasに画像（PNG）をランダムに描いて背景にする

Canvasで画像をランダムに描くサイト背景をWordPressで使ってみた

初心者にも使いやすい（と思う）レンタルサーバー