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();就會出現
如圖的情況;我想要的結果是
,該怎么實現呢??求教
問題解答
回答1:因為信息不足,我只能給出我的判斷。
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);
相關文章:
1. debian - docker依賴的aufs-tools源碼哪里可以找到啊?2. macos - mac下docker如何設置代理3. docker - 如何修改運行中容器的配置4. angular.js使用$resource服務把數據存入mongodb的問題。5. docker api 開發的端口怎么獲取?6. docker gitlab 如何git clone?7. javascript - 連續點擊觸發mouseleave事件8. docker 下面創建的IMAGE 他們的 ID 一樣?這個是怎么回事????9. docker start -a dockername 老是卡住,什么情況?10. dockerfile - 我用docker build的時候出現下邊問題 麻煩幫我看一下

網公網安備