HTML5のcanvasを使ってAndroidアプリ！描画練習⑧ - プログラミングで飯を食え。腕をあげたきゃ備忘録！

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

ではエンドレスリピートさせましょう。

やるべきことは、drawLine2関数の最後の処理でcanvasを初期化してからもう一度drawLine関数を呼び出すだけです。

以下の赤い部分です。

    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);
			c.clearRect(0,0,300,300);
			para = 0;
			para2 = 0;
			canvas = $("draw_space");
			c = canvas.getContext("2d");
			c.strokeStyle = "#ff0000";
			c.globalAlpha = 0.7;
			timer = setInterval(drawLine,50);
		}
	}

赤く書いた初期化処理と再スタートですが、大体わかると思います。

つまり、プログラムの一番最初にやった初期設定とほとんど同じですね。

ただ、以下の部分が気になると思いますので説明しておきます。

c.clearRect(0,0,300,300);

clearRect(x,y,w,h)は描画した図形を削除するために使用します。

削除は引数のw,hで指定した長方形で削除されるため、上記ソースのように

引数w,hをともに300pxに設定しcanvasサイズと同じにすることで全体をクリアしています。

そしてクリア後、初期設定を新たに行い、処理を再スタートさせているわけです。

以下、ソース全文です。

index.html

<!DOCTYPE html>  
<html>
<head>
	<meta charset="utf-8">
	<title>描画</title>
	<script type="text/javascript" src="jsWaffle.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<style>
		#display{
			margin:0 auto;
			width:300px;
		}
	</style>
</head>
<body>
	<div id="display">
		<canvas id="draw_space" width="300" height="300"></canvas>
	</div>
</body>
</html>

script.js

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++;
			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";
					timer2 = setInterval(drawLine2,50);
					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);
		}
	}
	
	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);
			c.clearRect(0,0,300,300);
			para = 0;
			para2 = 0;
			canvas = $("draw_space");
			c = canvas.getContext("2d");
			c.strokeStyle = "#ff0000";
			c.globalAlpha = 0.7;
			timer = setInterval(drawLine,50);
		}
	}
};

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

はい、canvasを利用して簡単に遊んでみました。

これからも、色々遊んでいきますのでよろしくお願いします。