dibujar círculos en movimiento

mientras buscaba cómo hacer un círculo mobile usando php, encontré esta pregunta. Pero como no soy muy experto en php, la mayoría de las cosas no me resultaban comprensibles. Así que pensé que ahora debía consultar a los expertos 🙂
Quiero dibujar un círculo que se moverá en movimiento circular en mi página php.
MI ESFUERZO: He tratado mucho de resolver esto, pero lo único que encontré fue que lo lograría con canvas HTML5. Pero me quedé atrapado en el cartesiano, el radio, etc. Estas cosas realmente me confunden.
Anhy sugerencias por favor.

3 Solutions collect form web for “dibujar círculos en movimiento”

La matemática detrás es:

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

Ahora puede ingresar el resultado a un elemento div que contiene la bola:

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

Hice una demostración en jsfiddle aquí: http://jsfiddle.net/AqKYC/

PHP es un lenguaje de progtwigción del lado del server. Parece que lo que quieres hacer es animar un círculo en el browser. PHP no se ejecuta en el browser, por lo que no puede usar PHP para animar un círculo.

Sin embargo, puede crear un <canvas> y usar JavaScript para animarlo. Aquí hay un tutorial de MDN sobre canvas, que incluye animaciones.

Como alternativa al canvas , puede usar un simple <div> , convertirlo en un círculo con border-radius: 50% CSS border-radius: 50% y luego animarlo con JavaScript puro o jQuery.

Aquí hay un jsfiddle con el círculo dibujado y usando jQuery.animate para moverlo a derecha, izquierda y derecha nuevamente.

jQuery.animate está completamente documentado aquí .

Aquí hay una muestra de un círculo mobile html5 con un tutorial que explica el código y cómo se hace. El código está bajo licencia gplv3 así que obviamente también es gratis.
https://www.youtube.com/watch?v=6j4Y14TEO6s

Fragmento en foco 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(); 

Otra muestra es la siguiente donde muestra la perspectiva animada de la misma si eso es lo que estás buscando.
https://www.youtube.com/watch?v=eKDeKFFZDNo

El objective es dividir la animation en algún punto y, por lo tanto, el fragment a continuación enfocado en la sección de networkingibujado del código.

  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(); } 
  • order de script para jquery con bootstrap
  • Siempre enfoca la tarjeta timelinesetter en la pantalla
  • ¿Cómo funciona el método beforeShowDay? (Jquery UI datepicker)
  • cómo encontrar elementos seleccionados con Jquery UI seleccionable
  • ayuda con la opción de range deslizante jquery
  • jQuery "guid" es nulo o no es un object
  • Contener arrastrable a múltiples elementos
  • Llamar a una function en arranque modal abierto
  • focus () jQueryUI no funciona
  • Polimorfismo de inheritance de JQuery UI
  • Al pasar el cursor, cambie el ícono del button de jQuery UI - roto en IE y Chrome
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.