разобрался, а почему у меня красный не появляется?
<html>
<body>
<canvas id="canvas"> Браузер не поддерживает canvas</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.style.width=600;
canvas.style.height=300;
canvas.width=1200;
canvas.height=600;
var x = canvas.width /2;
var y = canvas.height / 2;
var counterClockwise = false;
var run_black = function() {
var radius = 210;
var time = (new Date().getTime()- startTime)/ duration;
var startAngle = getRadians(-90);
var endAngle = getRadians(180);
context.lineWidth = 4;
context.strokeStyle = 'rgba(0,0,0,1)';
if(time < 1) {requestAnimationFrame(run_black);
endAngle = startAngle +(endAngle - startAngle)* time;
}
else {
duration = 1000,
startTime = new Date().getTime();
run_red();
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
};
var run_red = function() {
var time = (new Date().getTime()- startTime)/ duration;
var radius = 250;
var startAngle = getRadians(-90);
var endAngle = getRadians(0);
if(time < 1) {requestAnimationFrame(run_red);
endAngle = startAngle +(endAngle - startAngle)* time;
}
else {
duration = 1000,
startTime = new Date().getTime();
run_rose();
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.strokeStyle = 'rgba(175,9,54,1)';
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
};
function run_rose()
{
var time = (new Date().getTime()- startTime)/ duration;
var startAngle = getRadians(-90);
var endAngle = getRadians(0);
context.lineWidth = 22;
var radius = 150;
if(time < 1) {requestAnimationFrame(run_rose);
endAngle = startAngle +(endAngle - startAngle)* time;
};
context.clearRect(0, 0, 600, 300);
context.beginPath();
context.strokeStyle = 'rgba(251,79,134,1)';
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.stroke();
}
var duration = 1000,
startTime = new Date().getTime();
run_black();
function getRadians(degrees) {
return degrees * (Math.PI / 180);
}
}
</script>
</body>