Animación en canvas

aado29 · #1 (**permalink**) 18/02/2014, 20:44

necesito ayudar para animar Arc de canvas este en mi codigo:

Código HTML:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = int;
		function int() {
			var canvas = document.getElementsByTagName('canvas');
			for (var i = 0; i < canvas.length; i++) {
				var obj = document.getElementById('skill-'+[i]);
				var PPer = document.getElementById('skillP-'+[i]);

				var per = obj.getAttribute('data-per');
				
				PPer.innerHTML = per+'%';

				var ctx = obj.getContext('2d');

				ctx.lineWidth = 20;

				var x = obj.width/2;
				var y = obj.height/2;
				var radius = 65;
				var pi = Math.PI;

				var grados = (per*360)/100;

				var startAngle = pi * 1.5;
				var endAngle   = ((grados*pi)/180)-1.5707963267948966;
				var anticlockwise = false;
				
				ctx.beginPath();
				ctx.arc(x, y, 75, pi*0, pi*2, anticlockwise);
				ctx.arc(x, y, 55, pi*2, pi*0, true);
				ctx.fillStyle = 'rgb(170, 170, 170)';
				ctx.fill();
				ctx.closePath();

				ctx.beginPath();
				ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
				ctx.strokeStyle = 'rgb(64, 118, 165)';
				ctx.stroke();
				ctx.closePath();
			}

			if(false){
				setTimeout(int,100);
			}
		}
	</script>
	<style type="text/css">
		.skill {
			width: 400px;
			height: 400px;
			text-align: right;
		}
		.skills {
			margin: 0;
			padding: 0;
			display: inline-table;
			float: left;
			text-align: center;
			width: 50%;
			height: 50%;
		}
		#skillP-0,#skillP-1,#skillP-2,#skillP-3 {
			position: absolute;
			margin: 55px 0 0 80px;
			font-family: 'Source Sans Pro', sans-serif;
			font-size: 32px;
			font-weight: 200;

		}
	</style>
</head>
<body>
	<div class="skill">
		<div class="skills">
			<h4></h4>
			<p id="skillP-0"></p>
			<canvas id="skill-0" width="150" height="150" data-per="25"></canvas>
		</div>
		<div class="skills">
			<h4></h4>
			<p id="skillP-1"></p>
			<canvas id="skill-1" width="150" height="150" data-per="50"></canvas>
		</div>
		<div class="skills">
			<h4></h4>
			<p id="skillP-2"></p>
			<canvas id="skill-2" width="150" height="150" data-per="75"></canvas>
		</div>
		<div class="skills">
			<h4></h4>
			<p id="skillP-3"></p>
			<canvas id="skill-3" width="150" height="150" data-per="0"></canvas>
		</div>
	</div>
</body>
</html>

me gustaria que arrancaran en 0 y llegaran a data-per.. Muchas gracias