я сделал 4 canvas в которых должны отрисовываться фигуры каждая по своему таймеру, но они работают все одновременно. Помогите разобраться в этом. спасибо.
<body >
<ul class="tabs_menu">
<li class="tabs_menu__item active"><div class="btn_1" ></div></li>
<li class="tabs_menu__item"><div class="btn_2"></div></li>
<li class="tabs_menu__item"><div class="btn_3"></div></li>
<li class="tabs_menu__item"><div class="btn_4"></div></li>
<li class="tabs_menu__item"><div class="btn_5"></div></li>
</ul>
<div class="tabs">
<div class="info active">
<div class="speed__info">on <br>20 Мбит</div>
<div class="canvas__wrapper">
<div class="canvas__text">Индикатор загрузки</div>
<canvas class="canvas_1" width="120" height="120"></canvas>
<div class="canvas__percent_1"></div>
</div>
</div>
<div class="info">
<div class="speed__info">on <br>100 Мбит</div>
<div class="canvas__wrapper">
<div class="canvas__text">Индикатор загрузки</div>
<canvas class="canvas_2" width="120" height="120"></canvas>
<div class="canvas__percent_2"></div>
</div>
</div>
<div class="info">
<div class="speed__info">on <br>400 Мбит</div>
<div class="canvas__wrapper">
<div class="canvas__text">Индикатор загрузки</div>
<canvas class="canvas_3" width="120" height="120"></canvas>
<div class="canvas__percent_3"></div>
</div>
</div>
<div class="info">
<div class="speed__info">on <br>1000 Мбит</div>
<div class="canvas__wrapper">
<div class="canvas__text">Индикатор загрузки</div>
<canvas class="canvas_4" width="120" height="120"></canvas>
<div class="canvas__percent_4"></div>
</div>
</div>
</div>
<style>
.canvas{
background: #fff;
}
.btn_1,
.btn_2,
.btn_3,
.btn_4,
.btn_5{
width: 100px;
height: 50px;
background: red;
}
.btn_1{
background: red;
}
.btn_2{
background: yellow;
}
.btn_3{
background: green;
}
.btn_4{
background: blue;
}
.btn_5{
background: purple;
}
.tabs_menu{
width: 154px;
float: left;
}
.tabs_menu__item{
list-style: none;
margin-bottom: 10px;
}
.tabs_menu .tabs_menu__item:last-child{
margin-bottom: 0;
}
.tabs{
width: 83%;
float: right;
}
.info{
width: 20.6%;
margin-right: 0.2%;
height: 200px;
float: left;
}
.tabs .info:last-child{
margin-right: 0;
}
.speed__info{
text-align: center;
height: 80px;
padding-top: 20px;
background: #ccc;
}
.canvas__wrapper{
height: 280px;
position: relative;
margin-top: 10px;
background: #ccc;
}
.canvas_1,
.canvas_2,
.canvas_3,
.canvas_4{
position: absolute;
top: 40px;
left: 55px;
}
.canvas__text{
text-align: center;
}
.canvas__percent_1,
.canvas__percent_2,
.canvas__percent_3,
.canvas__percent_4{
position: absolute;
top: 75px;
left: 94px;
text-align: center;
width: 45px;
}
</style>
<script>
var btn_1 = document.querySelector('.btn_1');
var canvas_1 = document.querySelector('.canvas_1');
var context_1 = canvas_1.getContext('2d');
var centerX_1 = canvas_1.width / 2;
var canvas__percent_1 = document.querySelector('.canvas__percent_1')
var centerY_1 = canvas_1.height / 2;
var radius = 50;
var btn_2 = document.querySelector('.btn_2');
var canvas_2 = document.querySelector('.canvas_2');
var context_2 = canvas_2.getContext('2d');
var centerX_2 = canvas_2.width / 2;
var canvas__percent_2 = document.querySelector('.canvas__percent_2')
var centerY_2 = canvas_2.height / 2;
var btn_3 = document.querySelector('.btn_3');
var canvas_3 = document.querySelector('.canvas_3');
var context_3 = canvas_3.getContext('2d');
var centerX_3 = canvas_3.width / 2;
var canvas__percent_3 = document.querySelector('.canvas__percent_3')
var centerY_3 = canvas_3.height / 2;
var btn_4 = document.querySelector('.btn_4');
var canvas_4 = document.querySelector('.canvas_4');
var context_4 = canvas_4.getContext('2d');
var centerX_4 = canvas_4.width / 2;
var canvas__percent_4 = document.querySelector('.canvas__percent_4')
var centerY_4 = canvas_4.height / 2;
function getRadians(degrees) {
return (Math.PI/180)*degrees;
}
var degrees = 0;
function foo(){
setInterval(function(){
if(degrees<=360){
context_1.beginPath();
context_1.arc(centerX_1, centerY_1, radius, 0, getRadians(degrees), false);
context_1.lineWidth = 9;
context_1.fill
context_1.strokeStyle = '#005500';
context_1.stroke();
canvas__percent_1.innerHTML = Math.floor(degrees/360*100) + "%";
}
},
10);
context_1.clearRect(0, 0, canvas_1.width, canvas_1.height);
var set_1 = setInterval(function (){
if(degrees<=360){
context_2.beginPath();
context_2.arc(centerX_2, centerY_2, radius, 0, getRadians(degrees), false);
context_2.lineWidth = 8;
context_2.fill
context_2.strokeStyle = '#006780';
context_2.stroke();
canvas__percent_2.innerHTML = Math.floor(degrees/360*100) + "%";
}
else{
clearInterval(set_1);
}
},
20);
context_2.clearRect(0, 0, canvas_2.width, canvas_2.height);
setInterval(function (){
if(degrees<=360){
context_3.beginPath();
context_3.arc(centerX_3, centerY_3, radius, 0, getRadians(degrees), false);
context_3.lineWidth = 5;
context_3.fill
context_3.strokeStyle = '#024500';
context_3.stroke();
canvas__percent_3.innerHTML = Math.floor(degrees/360*100) + "%";
}
},
30);
context_3.clearRect(0, 0, canvas_3.width, canvas_3.height);
setInterval(function (){
if(degrees<=360){
context_4.beginPath();
context_4.arc(centerX_4, centerY_4, radius, 0, getRadians(degrees), false);
context_4.lineWidth = 2;
context_4.fill
context_4.strokeStyle = '#066770';
context_4.stroke();
;
canvas__percent_4.innerHTML = Math.floor(degrees/360*100) + "%";
}
degrees+= 1;
},
40);
context_4.clearRect(0, 0, canvas_4.width, canvas_4.height);
degrees= 0;
}
btn_1.addEventListener("click", foo);
</script>
