使用javascript在畫布中圍繞點旋轉直線

當我運行此代碼時，它會產生從0度到180度的「旋轉」行，問題是上一行不會被清除（所以ctx.clearRect（0,0,400,200 ）不起作用在控制檯登錄它顯示爲運行（當我嘗試調試），但它實際上並沒有清除它沒有人有任何想法如何解決這一問題使用javascript在畫布中圍繞點旋轉直線

var canvas = document.getElementById("radarImage"); 
var ctx = canvas.getContext("2d"); 

var angle = 0 
function incrementAngle(){ 

    angle++; 
    if(angle>180){ 
     angle=0; 

     } 


} 

function rotateRadar(){ 

    incrementAngle(); 
    ctx.clearRect(0,0,400,200); 
    ctx.save(); 
    ctx..translate(-200,-200); 
    ctx.rotate((Math.PI/180)*angle); 
    ctx.translate(-200,-200); 
    ctx.moveTo(200,200); 
    ctx.lineTo(0,200); 
    ctx.stroke(); 
    ctx.restore; 
} 
setInterval(rotateRadar,200);

來源

2016-04-20 Ahsin

這是因爲你總是重繪相同的路徑。你必須在每次迭代時調用'ctx.beginPath（）'。這裏有很多傻瓜，讓我找到一個。爲了讓你稍微等一下，這是一個片段，是錯誤的地方糾正：https://jsfiddle.net/vyxu7eev/ – Kaiido

不是一個完美的欺騙，但給出了爲什麼所以應該爲未來的讀者工作：http：// stackoverflow .com/questions/21869609/why-does-omitting-beginpath-redraw-everything – Kaiido

我在大約5個小時的搞亂之後，實際上已經想到了這一點。而不是使用clearRect（）;我製作了另一個具有雷達背景的功能，我在那裏調用了該功能。整個事情現在工作正常。謝謝你們的迴應。 – Ahsin

編輯：。？你應該請使用請求動畫幀不斷調用更新：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

如果您打算使用庫來處理canvas，那麼畫架js是可能是一種可能性：http://www.createjs.com/easeljs

另一個SO用戶要求畫架的JS類似的問題，也有一些很好的答案，可能是初步認識到你：EaselJS - Rotate a shape around its center

來源

2016-04-20 06:13:05 msmfsd

只要你不能旋轉畫布上線續，你有閱讀罪惡，cos在畫布上旋轉一條線。希望這應該對你有所幫助。 JsFiddle

context.clearRect(0,0,400,200); 
    context.beginPath(); 
    context.moveTo(x,y); 
    x1=Math.cos(startAngle)*radius+10; 
    y1=Math.sin(startAngle)*radius+10; 
    console.log(x1,y1); 
    context.lineTo(x1,y1); 
    context.stroke();

來源

2016-04-20 06:23:18 nisar

使用javascript在畫布中圍繞點旋轉直線

回答

相關問題