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

将context2D.beginPath();添加到draw2的开头（在绘制中也不会有任何影响）

.fill正在填充包含旧弧

的整个路径

Answer 2

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

如何在HTML5画布中使球变小

2 个答案: