画出移动的圆圈

Question

在搜索如何使用 php 制作移动圆圈时，我发现了这个question。但由于我不是 php 专家，所以大部分事情我都无法理解。所以我想现在我必须咨询专家 :)
我想在我的 php 页面上画一个以圆周运动移动的圆圈。
我的努力：我已经尝试了很多来解决这个问题，但我发现唯一可以通过canvas HTML5。但是我卡在了笛卡尔、半径等。这些事情真的让我很困惑。
请大家给点建议。

Answer 1

背后的数学原理是：

x = centerX + radius * Math.cos(angle * Math.PI / 180);
y = centerY + radius * Math.sin(angle * Math.PI / 180);

现在您可以将结果输入到包含球的 div 元素中：

var element = document.getElementById('ball');
var angle = 0;
var x = 0;
var y = 0;
var w = (window.innerWidth - 50) / 2;
var h = (window.innerHeight - 50) / 2;

function ballCircle() {
    x = w + w * Math.cos(angle * Math.PI / 180);
    y = h + h * Math.sin(angle * Math.PI / 180);

    ball.style.left = x + 'px';
    ball.style.top = y + 'px';

    angle++;
    if (angle > 360) {
        angle = 0;
    }
    setTimeout(ballCircle,20);
}
ballCircle();

我在这里做了一个关于 jsfiddle 的演示：http://jsfiddle.net/AqKYC/

Answer 2

PHP 是一种服务器端编程语言。听起来您想要做的是在浏览器中为圆圈设置动画。 PHP 不在浏览器中运行，因此您不能使用 PHP 为圆圈设置动画。

但是，您可以创建一个 <canvas> 并使用 JavaScript 对其进行动画处理。 Here 是一个 MDN 画布教程，包括动画。

作为canvas 的替代方案，您可以使用简单的<div>，使用CSS border-radius: 50% 将其变成一个圆圈，然后使用纯JavaScript 或jQuery 对其进行动画处理。

Here's a jsfiddle 绘制圆圈并使用jQuery.animate 再次向右、向左和向右移动。

jQuery.animate 有完整的文档here。

Answer 3

这是一个 html5 移动圆圈的示例，其中包含解释代码及其完成方式的教程。该代码在 gplv3 许可下，因此显然也是免费的。
https://www.youtube.com/watch?v=6j4Y14TEO6s

焦点片段 ctx.strokeStyle = 'rgb(255,0,0)'; ctx.lineWidth = 10;

                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.stroke();

另一个示例如下所示，如果您正在寻找它，它会显示相同的动画透视图。
https://www.youtube.com/watch?v=eKDeKFFZDNo

重点是在某个点中断动画，因此下面的 sn-p 在代码的重绘部分中成为焦点。

                if (!ctx.isPointInPath(300,500)) {
                    x = x + 1;
                    y = y + 2;
                    ctx.strokeStyle = colorToHex(getRandom(255),getRandom(255),getRandom(255));
                    ctx.lineWidth   = 10;

                    ctx.beginPath();
                    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                    ctx.closePath();

                    ctx.stroke();
                    }