如何在HTML5畫布中使球變小

Question

我正在嘗試使用HTML5畫布使球變得越來越小。 我已經能夠讓它變得更大，所以我認為反過來會很簡單。 我在這做錯了什么？ Console.log顯示從11到0的值減少1.當x小於0時，它停止。 但球不會改變形狀，我懷疑它是因為它可以在彼此之上繪制較小的形狀？ 我以為clearRect會為此工作嗎？

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

謝謝！

Answer 1

add context2D.beginPath(); 到draw2的開頭（畫畫時也不會受到傷害）

.fill填充整個路徑，包括舊弧

Answer 2

fill()調用再次填充舊的rect。 試試這個：

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);   
    }
}