0225課題提出 1秒ごとに円が出現する

課題提出

2020.02.25

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>タイマーによる数値のカウント</title>
</head>
<body>
	<h1>タイマーによる数値のカウント</h1>
	<p><input type="button" value="スタート"></p>
	<p></p>
	<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

<script>
	var count;
	var counter = null;

	function showCount(){
		counter.innerHTML = count;

		count++;

		if(count >= 2)drawAnim();

		setTimeout(showCount,1000);
	}
		
	function drawAnim(){
		canvas = document.getElementById("canvas");
		g = canvas.getContext("2d");

		x = Math.random()*500;
		y = Math.random()*500;
		r = Math.random()*120+30;
		j = Math.random()*0.8+0.2;

		var red = Math.floor(Math.random()*256);
		var green = Math.floor(Math.random()*256);
		var blue = Math.floor(Math.random()*256);
		var color = "rgb(" + red + "," + green + "," + blue + ")";

		g.beginPath();
		g.globalAlpha = j;
		g.fillStyle = color;
		g.arc(x,y,r,0,Math.PI*2,false);
		g.fill();
	};
		
	window.addEventListener("load",function(){
		var btn = document.getElementsByTagName("p");
		counter = btn[1];
		count = 0;
	});
		
	window.addEventListener("load",function(){
		var btn = document.getElementsByTagName("p");
		btn[0].addEventListener("click",showCount);
	});
</script>