如何在HTML5畫布中將球變小動畫

我正在嘗試使用HTML5畫布使球變得越來越小。我已經能夠使它變得更大，所以我認爲相反會很簡單。我在這裏做錯了什麼？ Console.log顯示從11到0的值減1。當x小於0時，停止。但球沒有改變形狀，我懷疑它是因爲它在彼此的頂部繪製更小的形狀，也許？我認爲clearRect會爲此工作？如何在HTML5畫布中將球變小動畫

function draw2() 
{ 
    console.log(x); 
    context2D.clearRect(0, 0, canvas.width, canvas.height); 
    context2D.arc(10, 10, x, 0, Math.PI * 2, true); 
    context2D.fill(); 
    x -= 1; 
    if (x < 0) { 
     clearInterval(s); 
    } 
}

的演示，請訪問：http://www.chronicled.org/dev/test.html

謝謝！

來源

2011-02-18 Rio

繪製一個半徑爲x的白色圓圈，遞減x，然後繪製黑色圓圈。這比解決方案更適合解決問題，但它可能會讓您對問題有所瞭解。 – 2011-02-18 22:23:30

它是值得的（也許！），你的例子將無法在IE9中工作。您需要包含`<！DOCTYPE html>`來跳轉標準模式（我知道這只是一個測試頁面，但根據規範，它不是HTML5中的可選元素）。另外，IE9不支持`const`關鍵字，因此它會阻塞`const FPS = 30`，並且不會進一步評估。 – Sapph 2011-02-18 22:46:45

添加context2D.beginPath();到DRAW2的開始（這也不會傷害有它在平局）

的是.fill僞填充整個路徑，其中包括老弧

來源

2011-02-18 22:26:43 generalhenry

的fill()呼叫灌裝舊的矩形再次。試試這個：

function draw2() 
{ 
    console.log(x);  
    context2D.clearRect(0, 0, canvas.width, canvas.height); 

    context2D.beginPath(); 
    context2D.arc(15, 15, x, 0, Math.PI * 2, true); 
    context2D.fill(); 
    context2D.closePath(); 
    x -= 1; 
    if (x < 0) { 
     clearInterval(s); 
    } 
}

來源

2011-02-18 22:31:31

如何在HTML5畫布中將球變小動畫

回答

相關問題