繼續前一天的內容
除了 "角度增加" 產生原地旋轉
再加上 "半徑減少"、"矩形尺寸減少"

var deg = 0;  // 角度
var radius = 100;  // 半徑
var item_size = 10;  // 矩形大小

執行時再逐漸增加減少值

deg += 1 ;
radius -= 0.1;
item_size -= 0.01;

就可以做出 轉出轉入 的效果

就像上圖矩形會一直轉出畫面後看不到地方
會繼續無止境的旋轉
如果要停止矩形繼續向外旋轉
就要在 setInterval 內加入判斷
設定一個半徑的值
當超過這個值時就停止

範例是半徑超過 100 時就停止

if(radius > 100 ){
  clearInterval(time);
}

看起來應該是會停的吧
其實是不會
因為在執行時半徑和大小的值是一直減少
減少到 0 時還是會以負數的值繼續減
所以在轉出時半徑就要改成 -100

if(radius < -100){
  clearInterval(time);
}

矩形到了半徑 -100 就會停下

以下是完整範例

var deg = 0;
var radius = 100;
var item_size = 10;
var time = setInterval(function(){
	if(radius < -100 ){
	  clearInterval(time);
	} else {
      ctx.clearRect(0, 0, 400, 400);
      deg += 1 ;
      radius -= 0.1;
      item_size -= 0.01;
      ctx.save();
      ctx.translate(200, 200);
      ctx.rotate(deg *Math.PI/180);
      ctx.fillRect(radius, radius, item_size, item_size);
      ctx.restore()
	}
},1)