<!DOCTYPE html>
<html>
<style>
div.a {
font-size: 25px;
}
</style>
<head>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid
#d3d3d3;">
</canvas>
<br>
<br>
<br>
<div id="circulation" class="a">
Круг циркуляции 1
</div>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let X = [-50,-50,-50];
let Y = [0,50,100];
let direction_1 = 1;
let direction_2 = 2;
let direction_3 = 3;
let direction_4 = 4;
let current_direction = 1;
let rectsize = 50;
let counter = 1;
let Globalcounter = 1;
let cr = 'rgb('+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+')';
setInterval(function() {
if (counter == 1) generatecircle(0,350,0);
if (counter == 2) generatecircle(1,300,50);
if (counter == 3) generatecircle(1,250,100);
if (counter == 4) {
ctx.clearRect(0,0,400,400);
counter = 1;
Globalcounter++;
X = [-50,-50,-50];
Y = [0,50,100];
}
}, 50);
function generatecircle(index1,lim_1,lim_2){
ctx.beginPath();
for (let y = 0; y <= 400; y += 50) {
for (let x = 0; x <= 400; x += 50) {
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, 400);
}
ctx.stroke();
}
cr = 'rgb('+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+')';
if (current_direction == direction_1){
X[index1] = X[index1] + rectsize;
}
if (current_direction == direction_2){
Y[index1] = Y[index1] + rectsize;
}
if (current_direction == direction_3){
X[index1] = X[index1] - rectsize;
}
if (current_direction == direction_4){
Y[index1] = Y[index1] - rectsize;
}
if (current_direction == direction_1 && X[index1] >= lim_1){
X[index1] = lim_1;
current_direction = direction_2;
}
if (current_direction == direction_2 && Y[index1] >= lim_1){
Y[index1] = lim_1;
current_direction = direction_3;
}
if (current_direction == direction_3 && X[index1] <= lim_2){
X[index1] = lim_2;
current_direction = direction_4;
}
if (current_direction == direction_4 && Y[index1] <= lim_2){
Y[index1] = lim_2;
current_direction = direction_1;
counter = counter + 1;
}
if (counter%4){
let circulation = document.getElementById("circulation");
circulation.innerHTML = "Круг циркуляции "+ Globalcounter;
}
ctx.fillStyle = cr;
ctx.fillRect(X[index1],Y[index1],49,49);
}
</script>
</body>
</html>
| 