如何在HTML5 Canvas中制作一个球渐渐变小的动画

Question

如何在HTML5 Canvas中制作一个球渐渐变小的动画

4

我正在尝试使用HTML5画布使球变得越来越小。我已经成功地让它变大，所以我认为反向操作应该很简单。但是这里我做错了什么？控制台日志显示从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

谢谢！

- Rio

1

画一个半径为x的白色圆，将x减1，然后画一个黑色圆。这更像是一种解决方法而不是修复方法，但它可能会让你对出了什么问题有一些见解。 - Marcelo Cantos

值得注意的是（也许！），你的示例在IE9中无法工作。你需要包含 <!DOCTYPE html> 来触发标准模式（我知道这只是一个测试页面，但根据规范，它不是HTML5中的可选元素）。此外，IE9不支持 const 关键字，因此它会在 const FPS = 30 处出错，并且不会进一步评估。 - Sapph

2个回答

3

在draw2的开头添加context2D.beginPath();（同时在draw中也加上它不会有坏处）。

.fill正在填充整个路径，包括旧弧线。

- generalhenry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samuel Neff · Accepted Answer

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