draw moving circles

canvas, html, javascript, jquery-ui

Solution

The mathematics behind is:

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

Now you can input the result to a div element which 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/

Problem

while searching that How can I made a moving circle using php, I found this question.But as I am not much expert in php so most of the things were not being understandable by me.So I thought now I must consult the experts :) I want to Draw a circle which will move in circular motion on my php page. MY EFFORT : I have tried alot to figure this out but the only thing I found that It would be achieved by `canvas` HTML5.But I got stuck in cartesian , radius etc.These things are really confusing me. Anhy suggestions please.

Original source