如何在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画布中将球变小动画

回答

相关问题