kojilow Blog

久しぶりにコーダーっぽい記事です。
そろそろHTML5を学ぼうと思い、勉強も兼ねてRe:designとmasukoisamu.comのサイトをHTML5に変更しました。

まずRe:designのサイトは主に、headerやsection等の新しいタグの使い方を意識してマークアップしてみました。
実際にマークアップして思ったことは、sectionとarticleの使い分けが難しい。。。
HTML5 Galleryとかのサイトをもとに一応使い分けしてみたけど、人によって結構sectionとarticleの使い方が違う気がします。
文章のアウトラインを意識した構造が必要になってくるみたい。
このあたりは今まであまり意識してこなかった部分なので今後の課題かなと思います。

masukoisamu.comは、canvasを使って背景をアニメーションさせてみました。
（IEには対応させていないのでモダンブラウザで見て下さい。）
アニメーションの内容としては、色・サイズのランダムな円が残像を残して動いてる感じです。
以下のサイトを参考にさせて頂きました。

・canvasでキラキラした背景を作る方法 | tech.kayac.com – KAYAC engineers’ blog
・[HTML5 canvas] 複数オブジェクトのアニメーションとマウス制御 – 1ka2ka.com
・HTML5 <canvas> アニメーション ボール跳ね返り – SCRATCHBRAIN labs

今回のアニメーションの方法は配列にオブジェクトを格納し、それを10/1000秒ごとに微妙にずらしながらcanvasに上書いて、ウィンドウの端まできたらバウンドさせる感じです。（この部分はかなり参考にさせて頂きました。）

//10/1000秒ごとに上書く
function drawTime(){
	clearInterval(drawTimeNum);
	drawTimeNum = setInterval("draw()", 10);
}
//オブジェクトを配列に格納
function addObj() {
	var obj = new Object();
	var r = Math.random()*255;
	var g = Math.random()*255;
	var b = Math.random()*255;
	obj.cx = Math.random() * cW;
	obj.cy = Math.random() * cH;
	obj.vx = Math.floor(Math.random()*10) -5;
	obj.vy = Math.floor(Math.random()*10) -5;
	obj.r = Math.ceil(r);
	obj.g = Math.ceil(g);
	obj.b = Math.ceil(b);
	obj.scale = Math.random()*10;
	objArray.push(obj);
}
//描画処理
function draw() {
	ctx.beginPath();
	ctx.fillStyle = ‘rgba(19, 19, 19, 0.3)’;
	ctx.fillRect(0,0,cW,cH);
	for (i = 0; i < objArray.length; i++) {
		objArray[i].cx += objArray[i].vx;
		objArray[i].cy += objArray[i].vy;
		if(objArray[i].cx < 0 || objArray[i].cx > cW){
			objArray[i].vx *= -1;
		}
		if(objArray[i].cy < 0 || objArray[i].cy > cH){
			objArray[i].vy *= -1;
		}
		ctx.beginPath();
		ctx.fillStyle = "rgba("+ objArray[i].r +", "+ objArray[i].g +", "+ objArray[i].b +", 0.3)";
		ctx.arc(objArray[i].cx, objArray[i].cy, objArray[i].scale, 0, Math.PI * 2, false);
		ctx.fill();
	}
}

今回は比較的単純な動きだけど、HTML5 Canvas and Audio Experimentのようにマウスカーソルを感知して複雑な動きもできるみたいなんでそのへんも今後の課題です。