Пользуясь canvas-ом получилось следующее, теперь не могу:
1. Cделать 5 разных кругов.
2. Hужно чтобы каждый загружался по очереди, сначала первый полностью, потом второй и так далее..А всего их было 5.
3. Cделать чтобы они начинали загружаться только если ты доходишь до них на странице.
HTML<canvas id="canvas" width="300" height="300"></canvas>
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = canvas.width;
var H = canvas.height;
var degrees = 0;
var new_degrees = 0;
var difference = 0;
var color = "lightblue";
var bgcolor = "#222";
var text;
var animation_loop, redraw_loop;
function init()
{
ctx.clearRect(0, 0, W, H);
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 4;
ctx.arc(W/2, H/2, 60, 0, Math.PI*2, false);
ctx.stroke();
var radians = degrees * Math.PI / 180;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 4;
ctx.arc(W/2, H/2, 60, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false);
ctx.stroke();
ctx.fillStyle = color;
ctx.font = "45px bebas";
text = Math.floor(degrees/360*100) + "%";
text_width = ctx.measureText(text).width;
ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
}
function draw()
{
if(typeof animation_loop != undefined) clearInterval(animation_loop);
new_degrees = 126;
difference = new_degrees - degrees;
animation_loop = setInterval(animate_to, 1000/difference);
}
function animate_to()
{
if(degrees < new_degrees)
degrees++;
else
degrees--;
if(degrees == new_degrees)
clearInterval(animation_loop);
init();
}
draw();
};
