javascript - 關于canvas旋轉

問題描述

$('#bt-lottery').one('click',function(){ var reg=1; setInterval(function(){ctx.save();ctx.translate(249.5,249.5);//將原點移動到畫布中心ctx.rotate(reg*Math.PI/180);ctx.clearRect(-pin.width/2,-pin.height/2,pin.width,pin.height);ctx.drawImage(pin,-pin.width/2,-pin.height/2);ctx.restore();reg++; },5);});

我想要實現指針(pin.png)在轉盤上(pan.png)旋轉的功能，但是如果ctx.clearRect();就會出現如圖的情況；我想要的結果是，該怎么實現呢？？求教

問題解答

因為信息不足，我只能給出我的判斷。

png不是透明的，這概率很小

你分成了兩個canvas，但帶指針的那個canvas有背景色，概率同樣很小

代碼問題：

setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); //這里你需要繪制背景圖片（轉盤），或者將轉盤作為離屏canvas分離出去（因為轉盤不會變動），只繪制指針。 ---我猜你缺少了這一步。。 ctx.save(); ctx.translate(249.5,249.5);//將原點移動到畫布中心 //ctx.clearRect(-pin.width/2,-pin.height/2,pin.width,pin.height);至于為什么清理出來的區域是個圓形跟你代碼執行的順序有關，先旋轉后清理和先清理后旋轉是不一樣的。 ctx.rotate(reg*Math.PI/180); ctx.drawImage(pin,-pin.width/2,-pin.height/2); ctx.restore(); reg++;},5);