你好！ 關于這個問題， 其實是因為Canvas的rotate的中心點是固定不變的，永遠在canvas的 坐標為(0,0)處，并且也無法設置旋轉中心點，而不是像CSS里面那樣默認在元素的中心點。

回到你的源代碼中，由于每一次的旋轉中心點是一樣的，而代碼中每一次旋轉之前都有一個translate，這樣的話肯定會導致fillRect之后，context 復位出現問題。

做了一張圖，解釋了這么問題，圖中 方塊1 和方塊5 最終位置不一樣，所以說明在循環中，每次循環都會影響下一次的Context （context 沒有復位成功），所以會導致下一次的渲染位置出現問題，導致位置誤差越來越大，并且由于每次rotate的旋轉的中心點在(0 ,0)， 所以星星的消失很可能是因為后面的星星位置被渲染到了畫布之外，其實就是沒有啦。

解決辦法就是把 源碼中的25 ，26行互換吧，這樣先復位rotate ，再復位translate 就沒問題啦，不過其實還有一個問題，就是本來直接這樣用rotate，很容易會把對象旋轉到畫布以外，特別是里原點較遠的 星星，所以 建議還是 通過簡單的變換 來實現 繞自身中心點進行旋轉。

比如對象的位置是在( x , y ),寬度為rectWidth，高度為rectHeight， 我們想讓他沿著自身旋轉 deg個角度；

context.translate(x?+?rectWidth?/?2,?y?+?rectHeight?/?2);
context.rotate(deg);
context.beginPath();
context.fillRect(-rectWidth/2,?-rectHeight/2,?rectWidth,?rectHeight);
context.rotate(-deg);
context.translate(-(x?+?rectWidth?/?2),?-(y?+?rectHeight?/?2));

或者

context.save();
context.translate(x?+?rectWidth?/?2,?y?+?rectHeight?/?2);
context.rotate(deg);
context.beginPath();
context.fillRect(-rectWidth/2,?-rectHeight/2,?rectWidth,?rectHeight);
context.restore()

自己研究的，寫的不是很專業 ， ~~有些東西自己表達的不是很清楚，見諒哈?