プログラミングで飯を食え。腕をあげたきゃ備忘録!

PHP、JavaScript、HTML5、CSS3などWEB系言語を中心に基本テク、備忘録をまとめます。Android、Iphoneアプリ開発についても!

HTML5のcanvasを使ってAndroidアプリ!描画練習⑥

サクウェブTVはコチラ↓↓↓
サクウェブTV

さて、前回予告した通り、カラフルにしてみましょう。

やりたいことは、線を10本ずつで異なる色にすることです。

色の変更は、

c.strokeStyle = "色";

とすればいいでしょう。

では、10本ずつってどうやるのでしょうか。

本数をカウントしているparaで分岐すればよさそうです。

switch(para){
	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";
		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;
}

今回分岐にはswichを使いました。少し冗長にも思えますが、こんな感じでいきましょう。

これを、drawLine関数の中に追記します。

    function drawLine(){
    	if(para<100){
			c.beginPath();
			c.moveTo(10,10);
			c.lineTo(10+para*5,290);
			c.stroke();
			para++;
			switch(para){
				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";
					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(timer);
		}
	}

これで、だいぶカラフルになるはずです。

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

はい、だいぶカラフルになりました。

あとは、時間差で他の描画も行ってみるとか、ループさせるとかもう少し手を加えますね。

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