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

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

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

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

比如對象的位置是在( x , y ),寬度為rectWidth，高度為rectHeight， 我們想讓他沿著自身旋轉(zhuǎn) 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()

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