Я нашел интересный тоже метод, мне он очень понравился только не могу понять как очередность анимации установить , я хочу например чтобы после того как черная дуга отрисуется начала отрисовываться другая дуга
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
#canvas /* стили для canvas*/
{
position:absolute;
left:-500px;
border: 1px solid black; /*рамка*/
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="150"> Браузер не поддерживает canvas</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.style.width=300;
canvas.style.height=150;
canvas.width=1200;
canvas.height=600;
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 150;
// Use objects to hold our draw and erase props
var drawProps = {
startAngle: -90,
speed: 2,
color: 'black',
counterClockwise: false,
globalCompositeOperation: context.globalCompositeOperation,
lineWidth: 22
};
/* var eraseProps = {
startAngle: 180,
speed: -2,
color: 'white',
counterClockwise: true,
globalCompositeOperation: "destination-out",
lineWidth: 15 // artefacts appear unless we increase lineWidth for erase
}; */
// Let's work in degrees as they're easier for humans to understand
var degrees = -90;
var props = drawProps;
// start the animation loop
setInterval(draw.bind(null,0), 10).queue(function() {alert()});
function draw(as) { /***************/
degrees += props.speed;
if (degrees >= as) {
return false;
}
else{
context.beginPath();
context.arc(
x,
y,
radius,
getRadians(props.startAngle),
getRadians(degrees),
props.counterClockwise
);
context.lineWidth = props.lineWidth;
context.strokeStyle = props.color;
context.stroke();
}
// Start erasing when we hit 360 degrees
/* if (degrees >= 360) {
context.closePath();
props = eraseProps;
context.globalCompositeOperation = props.globalCompositeOperation;
}
// Start drawing again when we get back to 0 degrees
if (degrees <= 0) {
canvas.width = canvas.width; // Clear the canvas for better performance (I think)
context.closePath();
props = drawProps;
context.globalCompositeOperation = props.globalCompositeOperation;
} */
/************************************************/
}
// Helper method to convert degrees to radians
function getRadians(degrees) {
return degrees * (Math.PI / 180);
}
</script>
<body></html>