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

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

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

本日のINDEX
  1. canvasのサイズをブラウザ ウィンドウサイズと一致させる(サンプル1)
    1. HTMLとCSSの準備
    2. canvasにウィンドウサイズを取得する
    3. canvasへの描画
  2. canvasをjavaScriptで生成する方法(サンプル2)
    1. HTMLとCSSの準備
    2. javaScriptで新しくcanvasとdivを作る
    3. 新しく作ったdivの中にcanvasを入れ、位置を指定して生成する
    4. canvasにウィンドウサイズを取得する
    5. canvasへの描画
  3. 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 でいいんじゃない」という情報をいただき、試してみました。
サイズ取得はコレでできたのですが、描画部分がボケボケに。描画のピクセル単位がビューポートに対する割合になるのか?ハッキリ原因はわからないのですが、どうにも調整できず、あきらめました。
サンプルはこちらです。ご興味ある方はご覧ください。★CSS3の単位「vw、vh、vmin、vmax」についても記載あり。
番外編:canvasをサイトの背景にする(サンプル)

●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のサイズにします。

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で縦横ウィンドウサイズぴったりにしていますので、これで canvasaもウィンドウサイズぴったりになる、というわけ。
(divを介さずにはできない(canvas は CSSで100%指定できない)ので、こうなったわけです。)

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

というわけで! <head>部分に jQueryを読み込んでおくのを忘れずに

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

これ↑は googleのライブラリを使って jQueryを読み込んでいます。
jQueryのオールド系最新バージョンは1.11ですが、それだとダメ。まっ白。1.10もダメ。残念。
モダンブラウザ用の最新ver. 2.0もダメでした..。オールド系1.2から1.8までならOKでした。
ほかのjQueryプラグインとの兼ね合いもあるので、1.8までだと若干キビシいかな。将来的に。
でもまあ、その頃にはまた、canvasを全面に貼る他の方法も見つかるでしょう...。

●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を書く順番が重要になります(はまっちゃった。笑)

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

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

●HTMLとCSSの準備

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

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!--ここにcanvas用のスクリプト-->
</head>
<body>
<div id="container"> <!--ここにコンテンツ--> </div>
</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なように作ったので、例えば、季節によって画像を(秋なら紅葉、冬なら雪の結晶とか)変えるだけで、背景イメージをガラッと変換できます。しかもPNGを差し替えるだけでOK。(バックグラウンドのグラデーションも変えてね)

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

あらかじめ画像(PNG)を用意して、それらをランダムな位置と回転で描画しています。
このサンプルでは、以下の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文字列として取得してみます。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.