Siema,
Jak zrobić by funkcja (progressSim) odpowiadała kilku canvas o id"my_canvas"? W tej chwili kod wykonuje się dla jednego canvas.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<canvas id="my_canvas" width="280" height="280" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas" width="280" height="280" style="border:1px dashed #CCC;"></canvas>
</div>
<script>
var ctx = document.getElementById('my_canvas').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;
function progressSim(){
for (var i=0; i<100; i++)
diff = ((al / 100) * Math.PI*2*10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 10;
ctx.fillStyle = '#01F';
ctx.strokeStyle = "#01F";
ctx.textAlign = 'center';
ctx.fillText(al+'%', cw*.5, ch*.5+2, cw);
ctx.beginPath();
ctx.arc(140, 140, 120, start, diff/10+start, false);
ctx.stroke();
if(al >= 100){
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
}
var sim = setInterval(progressSim, 20)
</script>
</body>