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
// 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.