javascript - 画出移动的圆圈

Question

在搜索 How can I made a move circle using php 时，我发现了这个问题。但由于我不是 php 方面的专家，所以大部分事情我都无法理解。所以我想现在我必须咨询专家:)
我想在我的 php 页面上画一个圆圈，它将以圆周运动移动。
我的努力：我已经尝试了很多来解决这个问题，但我发现它可以通过canvasHTML5 实现。但我陷入了笛卡尔、半径等。这些事情真的让我很困惑。
请安希建议。

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 对其进行动画处理。 这是一个关于画布的 MDN 教程，包括动画。

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

这是一个绘制圆圈的 jsfiddlejQuery.animate ，用于再次向右、向左和向右移动。

jQuery.animate在这里有完整的文档。

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

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

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