/canvas 動畫 Secret

## canvas 動畫
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>

<style>

	div {

		background: #AACCEE;

		border: solid 1px #336699;

		margin: 10px;

		padding: 5px;

		border-radius: 5px;

		display: inline-block;

		text-align: center

	}
        canvas {

		cursor: pointer;

	}


</style>

<body><div id="container"><canvas id="a_canvas" width="800" height="800"></canvas></div>


<script type="text/javascript">
  var canvas = document.getElementById("a_canvas");
  var ctx = canvas.getContext("2d");

  var a= "red";
  var b= "yellow";
  var c= "#AACCEE";

  ctx.fillStyle ="#AACCEE";
  ctx.fillRect(0,0,800,800);


  var i=0;


  //圓的起始點

  var startX=150;
  var startY=150;


  canvas.onmousedown = function(e){
  i=0;
  startX = e.x;
  startY = e.y;
  reDraw(e, true);
  }

  function reDraw(){
  // 在每0.3秒呼叫ball一次
  drawBall();
  time1=setInterval(drawBall,100);
  }

  //圓逐漸放大

  function drawBall(){


  ctx.clearRect(0,0,800,800);

  //建立CanvasGradient物件 g (第一個圓的座標,第一個圓的半徑,第二個圓的座標,第二個圓的半徑)
  var g = ctx.createRadialGradient(startX, startY, i, startX, startY, i*2);

  //新增漸層的顏色
  g.addColorStop(0,   a);
  g.addColorStop(0.7, b);
  g.addColorStop(1.0, c);

  //指定用來填滿的顏色跟樣式
  ctx.fillStyle = g;
  ctx.fillRect(startX-150,startY-150,startX+150,startX+150);

  //增加圓的半徑

  i+=5;
  //當增加的半徑大於70時(為了讓圓的直徑停在300) 停止動作 這裡我有很大的問題
  if(i>=70){


   clearInterval(time1);
   ctx.clearRect(startX-150,startY-150,startX+150,startX+150);

  }


}


</script>
</body></html>
	<!DOCTYPE html>
	<html><head><meta charset="utf-8"></head>

	<style>

	div {

	background: #AACCEE;

	border: solid 1px #336699;

	margin: 10px;

	padding: 5px;

	border-radius: 5px;

	display: inline-block;

	text-align: center

	}
	canvas {

	cursor: pointer;

	}



	</style>

	<body><div id="container"><canvas id="a_canvas" width="800" height="800"></canvas></div>





	<script type="text/javascript">
	var canvas = document.getElementById("a_canvas");
	var ctx = canvas.getContext("2d");

	var a= "red";
	var b= "yellow";
	var c= "#AACCEE";

	ctx.fillStyle ="#AACCEE";
	ctx.fillRect(0,0,800,800);


	var i=0;



	//圓的起始點

	var startX=150;
	var startY=150;


	canvas.onmousedown = function(e){
	i=0;
	startX = e.x;
	startY = e.y;
	reDraw(e, true);
	}

	function reDraw(){
	// 在每0.3秒呼叫ball一次
	drawBall();
	time1=setInterval(drawBall,100);
	}

	//圓逐漸放大

	function drawBall(){


	ctx.clearRect(0,0,800,800);

	//建立CanvasGradient物件 g (第一個圓的座標,第一個圓的半徑,第二個圓的座標,第二個圓的半徑)
	var g = ctx.createRadialGradient(startX, startY, i, startX, startY, i*2);

	//新增漸層的顏色
	g.addColorStop(0, a);
	g.addColorStop(0.7, b);
	g.addColorStop(1.0, c);

	//指定用來填滿的顏色跟樣式
	ctx.fillStyle = g;
	ctx.fillRect(startX-150,startY-150,startX+150,startX+150);

	//增加圓的半徑

	i+=5;
	//當增加的半徑大於70時(為了讓圓的直徑停在300) 停止動作這裡我有很大的問題
	if(i>=70){


	clearInterval(time1);
	ctx.clearRect(startX-150,startY-150,startX+150,startX+150);

	}


	}


	</script>
	</body></html>