gauges canvas jquery-animate draw radial

canvas - gauges - Animar un círculo de lona para dibujar en la carga



canvas html5 animation (2)

Tres pasos:

1) Make an "init" function which will assign the variables (they aren''t in any function). 2) Then use requestAnimationFrame, or setInterval with your drawing function you will create. 3) In this "drawing/updating" function you''re going to write your code to do the maths and then just animate the updated circle.

No hay ninguna función en tu código. Si no sabes cómo hacer funciones y usarlas + qué es la variable global, es mejor leer primero un tutorial sobre eso, pero de todos modos intentaré hacerte un ejemplo :)

OK Hola.

Decidí comenzar a usar el lienzo HTML para un pequeño proyecto que tengo.

No hay un verdadero comienzo todavía. Estoy aprendiendo los conceptos básicos de Canvas y quiero animar un círculo

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> body { margin: 0px; padding: 0px; background: #222; } </style> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <canvas id="myCanvas" width="578" height="250"></canvas> <script> var canvas = document.getElementById(''myCanvas''); var context = canvas.getContext(''2d''); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var startAngle = 1.5 * Math.PI; var endAngle = 3.2 * Math.PI; var counterClockwise = false; context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15; // line color context.strokeStyle = ''black''; context.stroke(); </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script> </body> </html>

Aquí hay un violín http://jsfiddle.net/oskar/Aapn8/ de lo que estoy tratando de lograr. No debo preocuparme por el efecto "Bounce".

Pero básicamente quiero que dibuje en la carga de la página y detenerse en el ángulo deseado del arco. Aquí está el violín de lo que he creado hasta ahora.

http://jsfiddle.net/skerwin/uhVj6/

Gracias


Demo en vivo

// requestAnimationFrame Shim (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); var canvas = document.getElementById(''myCanvas''); var context = canvas.getContext(''2d''); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var endPercent = 85; var curPerc = 0; var counterClockwise = false; var circ = Math.PI * 2; var quart = Math.PI / 2; context.lineWidth = 10; context.strokeStyle = ''#ad2323''; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 10; context.shadowColor = ''#656565''; function animate(current) { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); context.stroke(); curPerc++; if (curPerc < endPercent) { requestAnimationFrame(function () { animate(curPerc / 100) }); } } animate();

Básicamente utilicé la misma fórmula del enlace de demostración que publicaste. Luego agregué una función de animación que cuando se llama actualizará el círculo hasta que llegue al porcentaje final deseado.

La animación se llama continuamente mediante requestAnimationFrame, esta es la forma preferida de realizar cualquier clase de animaciones con lienzo. Cada vez que se llama animate el porcentaje actual se incrementa en uno, que luego se usa para volver a dibujar el arco.