【ＨＴＭＬ５】ＳＶＧを使ってＪａｖａｓｃｒｉｐｔで動画（動く絵？）

　前のエントリで書いたとおり、ＨＴＭＬ５になると、Javascriptで、円や四角形などを生成したり、動かしたりすることが出来る。
　というと、動画が書けるのではないか？と思うかもしれないけど、ここで２つ問題がある。

・Javascriptには、sleepがない。 　このため、一定時間待って、再描画とするには、何かの仕組みが必要 ・Javascriptでは、関数から抜けないと動画しない。 　ということは、for文でぐるぐる回して・・・というわけには行かない。

この２つの問題を、同時に解決するのが、setTimeout()関数で、setTimeout()を使うと、

　　・指定時間後に、指定された関数を呼び出す
　　・セットするだけで、次の行に進む

という特徴をもっているため、指定された関数＝自分自身（の関数）とすると、指定された時間後に、自分自身を呼び出してくれる。さらに、関数も抜けてくれる。
　今回はそこで、setTimeout()を使う。

---

■課題

２つのボールがある。
zikkoボタンをクリックされると、２つのボールが放物線っぽく落ちるけど、１つはちょっと遅れて落ちる。

---

■ソース

こんなかんじ。

＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="content-type" content="text/html; charset=UTF-8" /＞
＜title＞svgtest2＜/title＞
＜script language="JavaScript"＞
＜!--

//========================================
//	初期設定：好きな値に変える
//========================================
var endcount=100;	//	繰り返し数
var intv = 50;		//	インターバル
var inc_y=2;		//	yの係数
var inc_x=20;		//	xの係数

//========================================
//	変数宣言：値は変えないこと
//========================================
var count=0;
var timer;

//========================================
//	動画部分
//========================================
function douga()
{

	//	動画書き出し
	en = document.getElementById("svg_1");		//	円を取ってくる
	en.setAttribute("cy",inc_y*count*count);	//	xの値セット
	en.setAttribute("cx",inc_x * count);		//	yの値セット

	en = document.getElementById("svg_2");		//	円を取ってくる
	en.setAttribute("cy",inc_y*(count-3)*(count-3));//	xの値セット
	en.setAttribute("cx",inc_x * (count-3));	//	yの値セット



	//	タイマーセット
	if ( count ＜ endcount )
	{
		count ++;
		timer = setTimeout(douga,intv);
	}
}
// --＞
＜/script＞
＜/head＞
＜body bgcolor="#00FFFF"＞
＜button onclick="douga()" name="zikko" type="button"＞zikko＜/button＞＜br＞
＜svg＞
 ＜g＞
  ＜circle id="svg_1" r="10" cy="1" cx="1" stroke-width="2" stroke="#000000" fill="#FF0000"/＞
  ＜circle id="svg_2" r="10" cy="1" cx="1" stroke-width="2" stroke="#FF0000" fill="#0000FF"/＞
 ＜/g＞
＜/svg＞
＜/body＞
＜/html＞

（上記＜　＞　は本当は半角）
douga()のところで描画している。
前半は、位置を指定して、移動させている。
後半、setTimeout()を使って自分自身を呼び出すことで、時間待ち＆何回も呼び出を実現している。
もちろん、確認するときは、（ＩＥでなく）Chromeを使ってね！（＜＞は、半角に置換して）

【ＨＴＭＬ５】ＳＶＧを使ってＪａｖａｓｃｒｉｐｔでグラフを書く

HTML5になると、ＨＴＭＬ内にＳＶＧを埋め込める。
ということは、ＪａｖａｓｃｒｉｐｔでＳＶＧを生成して、動的に描画させることも出来る。
その実験。


まずは、簡単に、

という状態で、「実行」ボタンをクリックすると、

のような、グラフというか、図を書くＪａｖａｓｃｒｉｐｔ。

こんなかんじ。

＜html＞
  ＜head＞
    ＜title＞SVGテスト＜/title＞
＜script language="JavaScript"＞
＜!--

function zikko()
{
	html = '＜svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"＞＜g＞';

	for(i = 1 ; i ＜= 10 ; i ++ )
	{
		html = html + '＜rect id="' + 'svg_' + i + '" ';
		html = html + 'height="' + 30 + '" ';
		html = html + 'width="' + i*60 + '" ';
		html = html + 'y="' + 40*i + '" ';
		html = html + 'x=" '+ 30 + '" ';
        	html = html + 'stroke-width="2" stroke="#000000" fill="#FF0000"/＞';
	}

	html = html + '＜/g＞＜/svg＞';
	document.getElementById("graph1").innerHTML = html;

}
// --＞
＜/script＞
  ＜/head＞
  ＜body＞
    ＜div id="graph1"＞＜/div＞
    ＜button onclick="zikko()"＞実行＜/button＞
  ＜/body＞
＜/html＞

　関数zikkoの中で、ＳＶＧを作って（htmlというところに作っている）それを、innerHTMLしてる。
　Ｃｈｒｏｍｅでないと、見えません。

　もちょっと面白い例を、今度作りますです。

CSS3の文字の影つきがGooブログで使えるかどうかのテスト：結論、使えます！

ＣＳＳ３の機能、文字の影つきが、Gooブログで使えるかテスト

文字の影のテスト

上の文字、ＩＥだと、タダの文字だけど、
Chromeだと、灰色の文字がずれて、影のようになっていればＯＫ

---

今確認。Chromeで、そうなってました。ＯＫ
（つまり、Ｇｏｏブログ側で、iframeのように”はじいている”、ということはありません。指定どおり、表示されます）

ちなみに、そこのソースコードは、こんなかんじ

＜div style="text-shadow: 3px 3px 0px rgb(180, 180, 180);"＞ 文字の影のテスト＜/div＞

（上記＜　＞は、本当は半角）