绘制移动圆圈

搜索时，我怎样才能使用PHP做一个移动的圆圈，我发现这question。但因为我没有太多的PHP专家，所以大部分的东西都不被我理解。所以我现在想我现在必须咨询专家:)
我想绘制一个圆形，它将在我的php页面上以圆形运动。
我的努力：我已经尝试了很多，但我唯一发现，它将通过canvas HTML5实现。但我卡在笛卡儿，半径等这些事情真的让我困惑。
Anhy建议请。绘制移动圆圈

来源

2013-07-20 Ahmed

PHP __cannot__在浏览器中移动的圆：PHP简单地生成被发送到浏览器的HTML;它取决于该html（或js）在浏览器本身内执行操作。 –

在移动一个之前，从普通圆开始。 http://www.html5canvasutorials.com/tutorials/html5-canvas-circles/ – Zlatko

然后，您可以简单地添加其他命令，如同一次一个Google地址。不知道什么是“笛卡儿”，“半径”，甚至意味着什么。只是读了一下;） – Zlatko

数学背后是：

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/

来源

2013-07-20 19:31:21

这真的很棒！我只是好奇，因为我总是试图学习新的东西，但你认为这可能与css3动画有关。 – zazvorniki

我不确定，但我认为你可以在CSS中使用动画功能。我想你需要在一端使用一个更大的图像主体以获得圆心外的枢轴中心。尽管如此，我不知道如何以椭圆形式制作动画。 –

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

但是，您可以创建<canvas>并使用JavaScript为其设置动画效果。 Here是一个关于画布的MDN教程，包括动画。

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

Here's a jsfiddle绘制圆形并使用jQuery.animate再次将它向右，左，右移动。

jQuery.animate完全记录在here。

来源

2013-07-20 19:28:16 mwcz

下面是一个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(); 
        }

来源

2014-01-19 11:40:47 Keestu

只是发布链接不是一个真正的答案。这会更好，因为评论或如果你可以从这些视频中提取重要的代码。 – Dirk

修改为包含重要片段 – Keestu

绘制移动圆圈

回答

相关问题