Question

在搜索我怎样才能使用php创建一个移动的圈子时，我发现了这个question。但是由于我在php方面不是很专家所以我的大部分事情都无法理解。所以我现在想我必须咨询专家:)
我想在我的php页面上绘制一个圆圈运动的圆圈 我的努力：我已经尝试了很多，但我发现它唯一可以通过canvas HTML5来实现。但我陷入了笛卡尔，半径等等。这些事情都是真让我困惑。
Anhy建议请。

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对其进行动画处理。< / p>

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

重点是在某些时候打破动画，从而将下面的片段聚焦在代码的重绘部分。

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

画出动圈

3 个答案: