【HTML5】【canvas】【js】を利用した背景効果

2010/08/19 01:38

このQ&Aのポイント

非FLASHのWEBサイトに、【HTML5】【canvas】【js】を利用して動きのある背景を作成する方法について教えてください。
【HTML5】【canvas】【js】を使った背景効果の制作方法について詳しい方にアドバイスをいただきたいです。
また、同様の背景効果を実現するための【jQuery】のライブラリについても教えていただけると助かります。

Arishia_33
お礼率50% (2/4)

JavaScript
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/08/19 18:38 回答No.2

No1様が紹介なさっている後半のものの例です。 HTML5でもcanvasでもないし、あの人のように簡潔にも書けてないですけれど。 <div id="backlayer">の範囲の中で、ご提示のサイトのような模様が移動します。画像データを投稿するのが面倒なので、四角の模様は<div>で代用しています。画像などを使用する場合は、対象が変わるだけで同じ要領で可能かと。 parameterを変えることで、表示する個数やサイズの範囲などが変えられます。簡単にしたつもりなんだけれど、けっこう長くなったので文字数制限に引っかかるかも。ランダムな直線移動のみで、反射（跳ね返り）とかは行なっていません。（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#backlayer { 　position:absolute; 　overflow:hidden;width:800px; 　height:600px; 　z-index:-5; 　border:1px solid green; } div#backlayer div { 　position:absolute; 　overflow:hidden; 　border:10px solid #888; 　opacity:0.3; 　filter:alpha(opacity=30); } </style> </head> <body> <div id="backlayer"> </div> <script type="text/javascript"> <!-- var Mover = function() { 　this.element = document.createElement("div"); 　document.getElementById("backlayer").appendChild(this.element); } Mover.parameter = { 　number : 20, //　表示する個数　size : { max:50, min:10 }, //　生成される柄（div）のサイズ範囲　speed : { max:4, min:2 } //　移動速度の範囲 }; Mover.recall = function(obj) { 　return function() {obj.move()}; } Mover.prototype = { move : function() { 　var style = this.element.style; 　this.x += this.dx, this.y += this.dy; 　style.top = (this.y | 0) + "px"; 　style.left = (this.x | 0) + "px"; 　if (this.x>this.maxWidth || this.x<this.min || this.y>this.maxHeight || this.y<this.min) this.reset(); 　setTimeout( Mover.recall(this), 50); }, つづく（やっぱり長すぎた）

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

fujillin
ベストアンサー率61% (1594/2576)

2010/08/19 19:08 回答No.4

つづきです。（前半がダブってしまったようで失礼しました） reset : function() { 　var p = Mover.parameter, range = document.getElementById("backlayer"); 　var size = Math.random() * (p.size.max - p.size.min) + p.size.min | 0; 　var speed = Math.random() * (p.speed.max - p.speed.min) + p.speed.min; 　var style = this.element.style; 　var x, y, dx, dy, a = Math.random() * Math.PI * 2; 　this.min = -p.size.max * 1.5; 　this.maxWidth = range.clientWidth - this.min; 　this.maxHeight = range.clientHeight - this.min; 　x = Math.random() * this.maxWidth; 　y = Math.random() * this.maxHeight; 　dx = speed * Math.cos(a), dy = speed * Math.cos(a); 　switch (Math.random() * 4 | 0) { 　case 0: 　　dx = Math.abs(dx), x = this.min; 　　break; 　case 1: 　　dy = Math.abs(dy), y = this.min; 　　break; 　case 2: 　　dx = -Math.abs(dx), x = range.clientWidth; 　　break; 　case 3: 　　dy = -Math.abs(dy), y = range.clientHeight; 　} 　this.x = x, this.y = y; 　this.dx = dx, this.dy = dy; 　style.width = size + "px"; 　style.height = size + "px"; 　style.borderWidth = (size * 0.4 | 0) + "px"; } } if (document.getElementById("backlayer")) { 　var i, mover; 　for (i=0; i<Mover.parameter.number; i++) { 　　mover = new Mover(); 　　mover.reset(); 　　mover.move(); 　} } //--> </script> </body> </html>

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2010/08/19 19:07 回答No.3

No1様が終わりのほうで紹介なさっているものの例です。 HTML5でもcanvasでもないし、あの人のように簡潔にも書けてないですけれど。 <div id="backlayer">の範囲の中で、ご提示のサイトのような模様が移動します。画像データを投稿するのが面倒なので、四角の模様は<div>で代用しています。画像などを使用する場合は、対象が変わるだけなので同じ要領で可能かと。 parameterを変えることで、表示する個数やサイズの範囲などが変えられます。動きはランダムな直線移動のみで、反射（跳ね返り）とかは行なっていません。簡単にしたつもりなんだけれど、けっこう長くなったので文字数制限に引っかかるかも。（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#backlayer { 　position:absolute; 　overflow:hidden;width:800px; 　height:600px; 　z-index:-5; 　border:1px solid green; } div#backlayer div { 　position:absolute; 　overflow:hidden; 　border:10px solid #888; 　opacity:0.3; 　filter:alpha(opacity=30); } </style> </head> <body> <div id="backlayer"> </div> <script type="text/javascript"> <!-- var Mover = function() { 　this.element = document.createElement("div"); 　document.getElementById("backlayer").appendChild(this.element); } Mover.parameter = { 　number : 20, //　表示する個数　size : { max:50, min:10 }, //　生成される柄（div）のサイズ範囲　speed : { max:4, min:2 } //　移動速度の範囲 }; Mover.recall = function(obj) { 　return function() {obj.move()}; } Mover.prototype = { move : function() { 　var style = this.element.style; 　this.x += this.dx, this.y += this.dy; 　style.top = (this.y | 0) + "px"; 　style.left = (this.x | 0) + "px"; 　if (this.x>this.maxWidth || this.x<this.min || this.y>this.maxHeight || this.y<this.min) this.reset(); 　setTimeout( Mover.recall(this), 50); }, つづく（やっぱり長すぎた）

質問者

お礼 2010/08/22 13:36

ありがとうございます！上記のソースを参考に制作出来ました！あのようなＷＥＢページを初めて見て、【HTML5】【canvas】なのかなと思っていたのですが、【Js】だったのですね。 JavaScriptにして勉強不足ですが、これから頑張って勉強して行きたいと思います。本当にありがとうございました。

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2010/08/19 10:43 回答No.1

　ご提示のページは、HTML5の宣言はされてませんが、確かにCANVAS要素を使って短形を描画してますね。最初にjavascriptでブラウザーを判定してIEの時は、 CANVAS要素を作らないようにしているようです。まだIEはCANVASに対応していません。＞私には少し難しいみたい少し難しいみたい．．．　CANVAS要素の使い方自体はそんなに難しくないです。CANVAS要素を使って、javascript で領域内に、短形図形やイメージ画像を配置したり、その位置座標や、角度、色、透明度等をかえられます。↓に説明されたページやサンプルがあります。 http://www.html5.jp/canvas/index.html http://journal.mycom.co.jp/special/2009/html5-1/003.html http://ayuta.co.jp/html5-samples/ 　難しそうなのは、範囲内で規則的にランダムに動かす時の座標計算ロジックや、タイマー処理の制御ロジックです。数学（三角関数）の知識(数学IIB程度)が必要です。　　ご提示サイトのコードは、「bgCanvas.js」 http://www.jeia.co.jp/common/js/bgCanvas.js です。中身を研究してみるとよいかも。ご提示サイトに無断でそのまんま使っちゃだめよ！＞同じ様な動きをする【jQuery】のライブラリ jQuery使ったやつで、同じ様なのがあるかどうかは調べませんがあるような気がします。 jQueryやcanvas要素使わなくても、javascriptのみで同じ様な事は出来ます。短形図形のイメージファイルを準備して<img>要素を作り、そのスタイル属性やCSS定義で position:absoluteした上で、top、leftのpx値を、同様のロジックで変更してやればよいのです。　この場合もやはり、領域範囲の判定や座標計算ロジックが肝になります。また、パソコンがとろいと、ぎくしゃくしてしまいます。 ※　待ってれば、＜みちのく＞に住むあの人がちゃちゃっと作ってくれるかも．．．．．

質問者

お礼 2010/08/22 14:05

ありがとうございます！参考サイトは意見させて頂きました。 CANVAS要素を使用し色々な事が出来るみたいですね！今後の為にも勉強になります。ただ、【yyr446】さんのおっしゃられる様に＞難しそうなのは、範囲内で規則的にランダムに動かす時の座標計算ロジックや、タイマー処理の制御ロジックです。が私には難しいです。。。。ですが、参考サイトを見ながらて自分でも制作出来る様に頑張ってみたいと思います。本当にありがとうございました。

ログインすると、全ての回答が全文表示されます。