Draw moving circles

Question

during the search. How can I create a moving circle using php, I found this question . But since I am not very versed in php, so most of the things were not clear to me. Therefore, I thought that now I should consult with specialists :)
I want to draw a circle that will move in a circular motion on my php page.
MY EFFECT:. I tried to learn a lot about this, but the only thing I found was that this would be achieved using HTML5 canvas . But I'm stuck in Cartesian, radius, etc. These things really confuse me.
Anhy suggestions please.

Answer 1

The math behind:

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

Now you can enter the result in the div element that contains the ball:

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

I made a demo on jsfiddle here: http://jsfiddle.net/AqKYC/

Answer 2

PHP is a server-side programming language. It seems like what you want to do is animate the circle in the browser. PHP does not start in the browser, so you cannot use PHP to animate a circle.

However, you can create a <canvas> and use JavaScript to animate it. Here is an MDN tutorial on canvas, including animations.

As an alternative to canvas you can use a simple <div> , turn it into a circle with CSS border-radius: 50% , and then animate it with either pure JavaScript or jQuery.

Here's a jsfiddle with a circle drawn and using jQuery.animate to move it right, left and right again.

jQuery.animate is fully documented here .

Answer 3

Here is an example for the html5 moving circle with a tutorial explaining the code and how to do it. The code under the gplv3 license is so clearly free.
https://www.youtube.com/watch?v=6j4Y14TEO6s

Fragment in focus 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(); 

Another example is the following, where it shows an animated perspective of the same, if that is what you are looking for.
https://www.youtube.com/watch?v=eKDeKFFZDNo

The trick is to break the animation at some point and thus the shot is in focus in the code redraw section.

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