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

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

做了一張圖，解釋了這么問題，圖中 方塊1 和方塊5 最終位置不一樣，所以說明在循環(huán)中，每次循環(huán)都會(huì)影響下一次的Context （context 沒有復(fù)位成功），所以會(huì)導(dǎo)致下一次的渲染位置出現(xiàn)問題，導(dǎo)致位置誤差越來越大，并且由于每次rotate的旋轉(zhuǎn)的中心點(diǎn)在(0 ,0)， 所以星星的消失很可能是因?yàn)楹竺娴男切俏恢帽讳秩镜搅水嫴贾猓鋵?shí)就是沒有啦。

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

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

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á)的不是很清楚，見諒哈?