今天突然想說要來用 canvas 畫圖，並做成一個簡單的小動畫。
想要畫的圖是同心圓，並搭配 Fibonacci 數列，讓圓圈大小更自然的變化。
以下是 code 製造與演變的過程

HTML 的 code 只有簡單的一小行，來定出畫布的大小。

<canvas id="canvas" width="1000px" height="1000px"></canvas>

1. 畫一個同心圓

說明：
我們固定每一個圓的位置，然後設定不同大小的半徑，來化出不同的圓。因為固定位置的關係，便會有同心的效果。

ctx.lineWidth = 4;

ctx.strokeStyle = "Red";
circle(200, 150, 10);

ctx.strokeStyle = "orange";
circle(200, 150, 20);

ctx.strokeStyle = "yellow";
circle(200, 150, 30);

ctx.strokeStyle = "Green";
circle(200, 150, 50);

ctx.strokeStyle = "Blue";
circle(200, 150, 80);

ctx.strokeStyle = "Purple";
circle(200, 150, 130);

2. 用 for loop 優化程式

說明：
因為位置是重複的，所以可以試著把同樣的東西，用陣列與迴圈整理出來。

var styles = ["Red", "orange","yellow", "Green", "Blue", "Purple", "Gray"]
var size = [10, 20, 30, 50, 80, 130, 210]

for (var i=0; i<7; i++) {
  ctx.strokeStyle = styles[i];
  circle(200, 150, size[i]);  
}

3. 用 setInterval 反覆畫圖，將其變成動畫

說明：
因為是動態的，所以不會一開始就把所有的線都畫出來，並且會一直執行畫線的動作。所以利用 setInterval ，並改變半徑大小畫出不同的圓。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var styles = ["Red", "orange","yellow", "Green", "Blue", "Purple", "Gray"]
var size = [10, 20, 30, 50, 80, 130, 210]
var styleClear = "white"
var i = 0

var circle= function (x, y, radius) {
   ctx.beginPath();
   ctx.arc(x, y, radius, 0, 2*Math.PI, false);
   ctx.stroke();
};

setInterval(function(){
  ctx.lineWidth = 4;
  ctx.strokeStyle = styles[i];
  circle(200, 150, size[i]);
  ctx.lineWidth = 5;
  ctx.strokeStyle = styleClear;
  circle(200, 150, size[i-3]); 
  i += 1;
  if ( i > 9 ) {
    i = 0
  }
}, 1000);

最後成果：
codepen連結