問題描述

$('#bt-lottery').one('click',function(){ var reg=1; setInterval(function(){ctx.save();ctx.translate(249.5,249.5);//將原點(diǎn)移動(dòng)到畫布中心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);});

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

問題解答

因?yàn)樾畔⒉蛔悖抑荒芙o出我的判斷。

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

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

代碼問題：

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