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

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

さて、もう少し細工してみます。

前回はfor文を使用して線を一気に描画しましたが、これを一定時間ごとに１本ずつ描画することで少し、アニメーションのように見えるかもしれません。

やってみましょう。

利用するのはsetInterval()です。

今回は１０００分の５０秒ごとに線を描画してみます。

では、まずsetInterval()に指定するfunctionを定義しましょう。

function drawLine(){
	if(para<100){
		c.beginPath();
		c.moveTo(10,10);
		c.lineTo(10+para*5,290);
		c.stroke();
		para++;
        }else{
                clearInterval(timer);
        }
}

HTML5のcanvasを使ってAndroidアプリ！描画練習②で指定した変数paraはここで使用します。

setInterval()は例えば、

var timer = setInterval(drawLine,50);

のように指定することでsetInterval()が返すタイマーＩＤを取得できます。

タイマーＩＤはclearInterval()に引数として渡すことでsetInterval()の繰り返しを止めることができます。

clearInterval(timer); 

つまり、こうして止めない限りsetInterval()の繰り返しは続いてしまうため、ちょうど100本の直線描画が完了したら繰り返しを止めるためにif文で分岐しています。

paraは100回の処理をカウントするパラメータです。

以下今のところの全文です。

window.onload = function(){
	var para = 0;
	var para2 = 0;
	var canvas = $("draw_space");
	var c = canvas.getContext("2d");
	c.strokeStyle = "#ff0000";
	c.globalAlpha = 0.7;
	var timer = setInterval(drawLine,50);
	
	function drawLine(){
		if(para<100){
			c.beginPath();
			c.moveTo(10,10);
			c.lineTo(10+para*5,290);
			c.stroke();
			para++;
		}else{
			clearInterval(timer);
		}
	}
}

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

うん、少し動きがでましたね。

でも、もうちょっといじります。

次回は10本ずつで色を変えるなどしてカラフルにでもしてみましょうか。

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