HTML5のcanvasを使ってAndroidアプリ！描画練習⑦

サクウェブＴＶはコチラ↓↓↓

前回行ったカラフル化に加えて、その途中から他の描画も始めてみましょう。

たの描画を行うためのfunctionを定義します。

	function drawLine2(){
		if(para2<100){
			c.beginPath();
			c.moveTo(290,10);
			c.lineTo(290-para2*5,290);
			c.stroke();
			para2++;
			switch(para2){
				case 11:
					c.strokeStyle = "#00ff00";
					break;
				case 21:
					c.strokeStyle = "#0000ff";
					break;
				case 31:
					c.strokeStyle = "#00ffff";
					break;
				case 41:
					c.strokeStyle = "#ff00ff";
					break;
				case 51:
					c.strokeStyle = "#ff0000";
					c.save();
					break;
				case 61:
					c.strokeStyle = "#00ff00";
					break;
				case 71:
					c.strokeStyle = "#0000ff";
					break;
				case 81:
					c.strokeStyle = "#00ffff";
					break;
				case 91:
					c.strokeStyle = "#ff00ff";
					break;
			}
		}else{
			clearInterval(timer2);
		}
	}

こちらの描画では本数を数えるためのパラメータとしてpara2を使用しています。

あとは右側から線の描画を行うために

c.lineTo(290-para2*5,290);

と変えてあるくらいで、drawLine関数とほとんど変わりません。

これを初めの描画（drawLine()）が50本なされたあとに呼び出していくために

drawLine関数のswitchのなかの以下の部分をこう書きかえてください。

case 51:
	c.strokeStyle = "#ff0000";
	timer2 = setInterval(drawLine2,50);
	break;

さらに、case 61:から下のswitch処理は削除しておきます。

その理由はdrawList2関数の中でも同じ処理が行われますので、処理がかぶってしまわないようにスリム化するためです。

では、これを実行してみましょう。実行結果をYoutubeの動画で貼り付けましたのでご覧ください。

いや～だいぶ美しくなっていきました（？）

でもこれでは描画が一通り終わったら停止してしまいますから、

次回これをエンドレスリピートさせてこのシリーズを終えましょう。

＞＞HTML5のcanvasを使ってAndroidアプリ！描画練習⑧＜＜