如何在 HTML5 画布中为球变小制作动画

发布于 2024-10-17 21:02:38 字数 581 浏览 1 评论 0原文

我正在尝试使用 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

谢谢！

原文

I'm trying to make a ball become increasingly smaller using HTML5 canvas. I've been able to make it grow larger, so I figured the reverse would be simple. What am I doing wrong here? Console.log shows me values from 11 to 0 decreasing by 1. When x is less than 0, it stops. But the ball doesn't change shape, and I suspect its because it's drawing smaller shapes on top of each other, perhaps? I thought clearRect would work for that?

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

A demo is available at: http://www.chronicled.org/dev/test.html

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷路的信 2024-10-24 21:02:38

添加 context2D.beginPath(); 到draw2的开头（将它放在draw中也不会造成伤害）

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

回复收藏 0 原文

魔法少女 2024-10-24 21:02:38

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

The fill() call is filling the old rect again. Try this instead:

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

回复收藏 0 原文

~没有更多了~