dポイントプレゼントキャンペーン実施中！

【ＨＴＭL５】【canvas】【js】を利用した背景効果

解決済

  • 質問者：Arishia_33
  • 質問日時：
  • 回答数：4件

【ＨＴＭL５】【canvas】【js】を利用した背景効果

初めまして。

早速ですが、

http://www.jeia.co.jp/

の様な背景に動き（ランダム）がある、
非FLASHのＷＥＢサイトを制作したいと思っているのですが、
どの様にすれば良いのか全く分かりません。

検索で分かった事は【ＨＴＭL５】×【canvas】×【js】で動作してるとの
記事がありましたが、【ＨＴＭL５】×【canvas】×【js】に関してはほぼ無知
な私には少し難しいみたいなのでご質問させて頂きました。

勉強不足で大変申し訳ないのですが、
詳しい方ご教授頂けませんでしょうか？

また、同じ様な動きをする【jQuery】のライブラリがあれば
教えて頂けると助かります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

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);
},


つづく（やっぱり長すぎた）
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： fujillin
  • 回答日時：

つづきです。


（前半がダブってしまったようで失礼しました）

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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

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);
},


つづく（やっぱり長すぎた）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
上記のソースを参考に制作出来ました！

あのようなＷＥＢページを初めて見て、
【HTML5】【canvas】なのかなと思っていたのですが、
【Js】だったのですね。

JavaScriptにして勉強不足ですが、
これから頑張って勉強して行きたいと思います。

本当にありがとうございました。

通報する
お礼日時：2010/08/22 13:36

No.1

  • 回答者： yyr446
  • 回答日時：

　ご提示のページは、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/ …
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値を、同様のロジックで変更してやれば
よいのです。
　この場合もやはり、領域範囲の判定や座標計算ロジックが肝になります。また、パソコン
がとろいと、ぎくしゃくしてしまいます。

※　待ってれば、＜みちのく＞に住むあの人がちゃちゃっと作ってくれるかも．．．．．
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
参考サイトは意見させて頂きました。

CANVAS要素を使用し色々な事が出来るみたいですね！
今後の為にも勉強になります。
ただ、【yyr446】さんのおっしゃられる様に

＞難しそうなのは、範囲内で規則的にランダムに動かす時の座標計算ロジックや、タイマー
処理の制御ロジックです。

が私には難しいです。。。。

ですが、参考サイトを見ながらて自分でも制作出来る様に
頑張ってみたいと思います。

本当にありがとうございました。

通報する
お礼日時：2010/08/22 14:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報