⇒サンプルを見る（別ウインドウ）
まぁ、それでも、HTML ページ上で、Flash を使用せずに 3D でオブジェクトが動くのは新鮮。
クリックする度にオブジェクトの形状が変化する。
最初はこの形状の切り替えもアニメーションさせようと思ったのだけども、やっぱり少し面倒なのと、ちょっとそこまで時間が無かったので割愛。
そうそう、オマケに残像処理も付けてみた。]]>
⇒サンプルを見る（別ウインドウ）
まぁ、それでも、HTML ページ上で、Flash を使用せずに 3D でオブジェクトが動くのは新鮮。
クリックする度にオブジェクトの形状が変化する。
最初はこの形状の切り替えもアニメーションさせようと思ったのだけども、やっぱり少し面倒なのと、ちょっとそこまで時間が無かったので割愛。
そうそう、オマケに残像処理も付けてみた。]]>
⇒サンプルを見る（別ウインドウ）
※iPad で動作確認。iPhone でも同じように動作するはず（？）
iPad や iPhone にはそれぞれタッチ用のイベントが用意されているので、そのイベントを登録して処理を行う。
しかもタッチ数は5つまで取得できるとのこと。せっかく5つも使えるってことで、あれこれと試行錯誤して最高5本指で同時に線を描くことができるようにしてみた。
同時に複数の線が描ける感覚は PC では味わえない新しい感覚だ。
⇒サンプルを見る（別ウインドウ）
上記サンプルでは、円が5つ縦に並んでおり、キャンバス上でクリックすると、そのクリックしたX座標に向かって円が動くという内容。それぞれの円で動く速さが異なり、上から「等速」「加速」「減速」「加速-減速」「減速-加速」というパターンとなっている。
またラジオボタンでアニメーションを行う時間を変更できるようにしている。
ただ、あまり複雑なアニメーションで制御できるわけではないので、コンテンツ内容によって処理をカスタマイズするのが手っ取り早い感じかな。
もう少し汎用性が高められると便利なんだろうけどもね…。自分であれこれ改良するにも限度がありそうな予感…。
なんで、もっと良い処理の仕方や、モーション管理系のライブラリがあると良いんだけどもねー。
いやー、思い切り、他力本願（;´д｀）ﾉ]]>
⇒サンプルを見る（別ウインドウ）
ただ純粋に追尾するだけではなく、少し慣性の動きを加えてアニメーションさせてみた。この辺のパラメータは毎回ページを更新する度にランダムで設定しているので、何度か更新しつつサンプルを見てみると良いかも。]]>
⇒サンプルを見る（別ウインドウ）
よくある雪が降る雰囲気のアニメーション。
今まではひとつの形を動かす程度だったんだけども、雪、というからには、いくつか複数の白い円、そしてランダム要素のある動きが必要となってくる。
canvas の場合は、Flash みたいにシンボルなどがあるわけではないので、配列を使ってオブジェクトの属性などを計算処理させていくはず。そして、その配列をループ処理させて描画していく感じだよね。きっと。
ついでにオマケ機能として、雪にマウスカーソルを近づけると、マウス付近の雪オブジェクトが大きくなっていくという、特に意味無いインタラクティブ動作を実装してみた。
あと、ふとした印象で、実際にはどうかは良く分からない感覚的な印象なんだけども、いちいち描画をクリアにするより、上書きで描画していった方が処理が早いような気もした。
もちろん、何か数値とか計測したわけではないので、ただの気のせいかもしれないけどね（汗）
かなり心地よいモーションが堪能できる HTML5 Canvas のデモサイト。
⇒サンプルを見る（別ウインドウ）
javascript のコードはすこーし長めになってしまったんで割愛。気になる人はサンプルページで HTML ソースを確認してもらえればと。
基本的にはマウスイベントでマウスが押している状態か押していない状態かをフラグで判別。マウスを押している時は、マウスが移動する度に、その座標に対して円の描画を行う。
あくまでも簡易なので、マウスをビシャァーっと動かすと、点がぽつらぽつらと描画されてしまうのは愛嬌だと思っていただければ幸い。この辺を補完処理して描画できると、よりお絵かきツールっぽいんだけどねー。そんな高度なことは今はちと厳しいっス。
あとは、おまけ程度にラジオボタンで線の太さを切り替えられるようにしてみた。
canvas に描画された画像に変換するのも、このtoDataURL() メソッドを使用すれば簡単に処理を行える。
何気なく Fireworks とかで画像ファイルを開いてみたら、ちゃんと透過情報も保持されていた！
こりゃあ、便利だねー。
⇒サンプルを見る（別ウインドウ）
とりあえずあんま余裕がなかったんで、座標取得やらマウスイベントの簡単なサンプル。
マウスを動かすとXY座標が表示。クリックでその場所に赤い円が描かれ、クリックを離すとで少し大きな青い円が描かれる。あとは canvas の領域からマウスが外れると黒色で描かれマウスアウトと表示される。
まぁ、このくらいシンプルな方が、後々にこの記事を見た時にちょうど良いサンプルとなるんでいいかー。
javascript のコードはこんな感じ。
var cW = 600; //キャンバス横サイズ
var cH = 300; //キャンバス縦サイズ
var mouseX;
var mouseY;
window.onload = function() {
draw();
};
function draw() {
//キャンバスの初期処理
var canvas = document.getElementById('testCanvas');
if ( ! canvas || ! canvas.getContext ) return false;
//2Dコンテキスト
var ctx = canvas.getContext('2d');
//イベント：マウス移動
canvas.onmousemove = mouseMoveListner;
function mouseMoveListner(e) {
//表示クリア
ctx.clearRect(0, 0, cW, cH);
//座標調整
adjustXY(e);
//テキストの描画
ctx.globalAlpha = 1;
ctx.fillStyle = "#666666";
ctx.fillText("X座標：" + mouseX, 5, 12);
ctx.fillText("Y座標：" + mouseY, 5, 24);
}
//イベント：マウスダウン
canvas.onmousedown = mouseDownListner;
function mouseDownListner(e) {
//表示クリア
ctx.clearRect(0, 0, cW, cH);
//座標調整
adjustXY(e);
//円を描く
ctx.beginPath();
ctx.fillStyle = "#CC0000";
ctx.arc(mouseX, mouseY, 20, 0, Math.PI * 2, false);
ctx.fill();
//テキストの描画
ctx.globalAlpha = 1;
ctx.fillStyle = "#666666";
ctx.fillText("X座標：" + mouseX, 5, 12);
ctx.fillText("Y座標：" + mouseY, 5, 24);
ctx.fillText("イベント：マウスダウン", 5, 36);
}
//イベント：マウスアップ
canvas.onmouseup = mouseUpListner;
function mouseUpListner(e) {
//表示クリア
ctx.clearRect(0, 0, cW, cH);
//座標調整
adjustXY(e);
//円を描く
ctx.beginPath();
ctx.fillStyle = "#0000CC";
ctx.arc(mouseX, mouseY, 40, 0, Math.PI * 2, false);
ctx.fill();
//テキストの描画
ctx.globalAlpha = 1;
ctx.fillStyle = "#666666";
ctx.fillText("X座標：" + mouseX, 5, 12);
ctx.fillText("Y座標：" + mouseY, 5, 24);
ctx.fillText("イベント：マウスアップ", 5, 36);
}
//イベント：マウスアウト
canvas.onmouseout = mouseOutListner;
function mouseOutListner(e) {
//表示クリア
ctx.clearRect(0, 0, cW, cH);
//座標調整
adjustXY(e);
//矩形を描く
ctx.beginPath(); //線を描くと宣言
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, cW, cH); //塗りつぶした矩形を描画
//テキストの描画
ctx.globalAlpha = 1;
ctx.fillStyle = "#666666";
ctx.fillText("X座標：" + mouseX, 5, 12);
ctx.fillText("Y座標：" + mouseY, 5, 24);
ctx.fillText("イベント：マウスアウト", 5, 36);
}
function adjustXY(e) {
var rect = e.target.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
}
}
⇒サンプルを見る（別ウインドウ）
IE は無理っぽい感じか…？
Firefox や Safari、Chrome あたりだと問題無く動作しているようだ。
まぁ、こんな感じで円のオブジェクトがクルクル回るようなアニメーション。座標だけではなく、大きさや透明度なども調整を加えてみた。
基本的にはタイマーで一定時間ごとに座標計算して描画する感じ。
Flash で BitmapData の描画アニメーションさせるのとそう大きく違いはないんで、比較的すんなりとこのサンプルを作成することができた。
少し、ハマってしまったのが、円オブジェクトを描画する前に「beginPath()」を記述し忘れてしまい、表示クリアが正常に行われなかった…。ちょっとしばらくの間「なんでだ？なんでだ？」とあれこれ原因を調べる結果となってしまったので今度からは注意しよう。
javascript のコードはこんな感じ。
var timerID;
var cW = 600; //キャンバス横サイズ
var cH = 300; //キャンバス縦サイズ
var i = 0; //角度の初期値
var div = 5; //角度の増源値
var objX = 300; //オブジェクトのX座標
var objY = 150; //オブジェクトのY座標
var objS; //オブジェクトのサイズ
var objA; //オブジェクトの透明度
var maxAlpha = 1;//最大アルファ値
var defScall = 20; //オブジェクトのデフォルトサイズ
var radiusX = cW / 2 - 50; //横の半径
var radiusY = cH / 2 - 50; //縦の半径
window.onload = function() {
setTimer();
};
function setTimer(){
clearInterval(timerID);
timerID = setInterval("setMove()", 50);
}
function setMove(){
//角度調整
i += div;
//パラメータの計算
divSin = Math.sin(i / 360 * 2 * Math.PI);
divCos = Math.cos(i / 360 * 2 * Math.PI);
objX = divSin * radiusX + cW / 2; //X座標
objY = divSin * radiusY + cH / 2; //Y座標
objS = (divCos + 2) / 2 * defScall; //大きさ
objA = (divCos + 2) / 2 * maxAlpha; //透明度
//描画処理
draw();
}
function draw() {
//キャンバスの初期処理
var canvas = document.getElementById('testCanvas');
if ( ! canvas || ! canvas.getContext ) return false;
//2Dコンテキスト
var ctx = canvas.getContext('2d');
//表示クリア
ctx.clearRect(0, 0, cW, cH);
//円を描く
ctx.beginPath();
ctx.globalAlpha = objA;
ctx.fillStyle = "#CC0000";
ctx.arc(objX, objY, objS, 0, Math.PI * 2, false);
ctx.fill();
//テキストの描画
ctx.globalAlpha = 1;
ctx.fillStyle = "#666666";
ctx.fillText("X座標：" + objX, 5, 12);
ctx.fillText("Y座標：" + objY, 5, 24);
ctx.fillText("大きさ：" + objS, 5, 36);
ctx.fillText("透明度：" + objA, 5, 48);
}
⇒サンプルを見る（別ウインドウ）
IE の場合、基本的に canvas に対応していないが、「ExplorerCanvas」という javascript ライブラリを利用すると同じように描画が可能となるようだ。しかし、なんかうまく描画されない箇所もある…。完全な対応状況ではないってことかな？
canvas 自体は基本的に何も表示されないらしく、javascript で線や円などの図形を描画する処理を行わないと意味がないようだ。
あと、基本的にアニメーションすることができないらしい。といっても、1コマごと描画を繰り返すことでアニメーションのように見せることが可能らしい。よく Flash と比較されるんで、てっきりアニメーションなども対応しているかと思ったけども違うんだねー。うーむ…。
しかし、今回の canvas のサンプル描画については、Flash の BitmapData の描画などにも共通する部分があるので馴染み深い印象。
ちなみに、javascript のコードはこんな感じ。
window.onload = function() {
draw();
};
function draw() {
//キャンバスの初期処理
var canvas = document.getElementById('testCanvas');
if ( ! canvas || ! canvas.getContext ) return false;
//2Dコンテキスト
var ctx = canvas.getContext('2d');
//ランダム数値
var ranNo = Math.floor(Math.random() * 3);
if (ranNo == 0) {
//線の色設定
ctx.strokeStyle = "#8080ff";
//三角形を描く
ctx.beginPath(); //線を描くと宣言
ctx.moveTo(20, 20); //描き始めるXY座標を指定
ctx.lineTo(20, 280); //引きたい線のXY座標を指定
ctx.lineTo(480, 280); //引きたい線のXY座標を指定
ctx.closePath(); //描いた線を閉じる
ctx.stroke(); //描画
//テキストの描画
ctx.font = '24px';
ctx.fillStyle = "#DD0000";
ctx.textBaseline = "top";
ctx.fillText("No.1（全3種） 三角形を描く", 10, 24);
} else if (ranNo == 1) {
//塗りの色設定
ctx.fillStyle = "#008080";
//矩形を描く
ctx.beginPath(); //線を描くと宣言
ctx.fillRect(50, 50, 500, 200); //塗りつぶした矩形を描画
ctx.beginPath(); //線を描くと宣言
ctx.clearRect(300, 150, 200, 80); //矩形を削除
//テキストの描画
ctx.font = '24px';
ctx.fillStyle = "#666666";
ctx.textBaseline = "bottom";
ctx.fillText("No.2（全3種） 矩形を描く", 10, 24);
} else if (ranNo == 2) {
//グラデーション領域設定
var grad = ctx.createLinearGradient(200, 100, 400, 200);
//グラデーション
grad.addColorStop(0,'#DD0000'); // 赤
grad.addColorStop(0.5,'#0000DD'); // 青
grad.addColorStop(1,'#00DD00'); // 緑
//塗りの色設定
ctx.fillStyle = grad;
//円を描く
ctx.arc(300, 150, 150, 0, Math.PI*2, false);
ctx.fill();
//テキストの描画
ctx.font = '24px';
ctx.fillStyle = "#FF66CC";
ctx.textBaseline = "middle";
ctx.fillText("No.3（全3種） グラデーションの円を描く", 10, 24);
}
}
<video controls autoplay poster="/uploadfile/100528/img.gif" width="320" height="240">
<source src="/uploadfile/100528/the_time_when_it_snows.ogv" type="video/ogg">
<source src="/uploadfile/100528/the_time_when_it_snows.mp4" type="video/mp4">
<source src="/uploadfile/100528/the_time_when_it_snows.webm" type="video/webm">
<p>動画を再生するには video タグをサポートしたブラウザが必要です。</p>
</video>
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
例えば、タブメニューで中身が切り替わり、それぞれボタン制御ができるっていうサンプル。
目的別やカテゴリごとに内容を切り替えると使えるかなーと思ったりするんだけども、どうだろうか？
あとは、ダミーボタンのそれぞれのボタンのロールオーバーに合わせて、メインコンテンツの表示などを制御していくだけ。
スクリプトなどを解説するようなほどのことはしていないので、詳しくはサンプルファイルを参照してもらえればと。
四角（■）が横に4つ並んでいる「db」オブジェクト。フレーム別にボタンがずらずらと配置されているのだが、これらのボタンに記述されているスクリプトがほぼメイン的な処理となる。
▼ルートの1フレーム目
----------
fscommand2("FullScreen", true);
fscommand2("SetQuality", "high");
//_focusrect = false;
//db._alpha = 0;