Квадратик

var angle;
var check;
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame
})();
window.onload =function(){//начальная отрисовка
	var ctx = document.getElementById("paint").getContext("2d");
	angle=0;
	check=0;
	ctx.translate(250,250);
	ctx.beginPath();
	ctx.fillStyle="blue";
	//левый верхний круг
	leftTopCircle(rotate_X(-75,-75,-angle),rotate_Y(-75,-75,-angle));
	leftTopAngle(rotate_X(-75,-75,-angle),rotate_Y(-75,-75,-angle));
	//правый верхний круг
	rightTopCircle(rotate_X(75,-75,-angle),rotate_Y(75,-75,-angle));
	rightTopAngle(rotate_X(75,-75,-angle),rotate_Y(75,-75,-angle));
	//левый нижний круг
	leftBotCircle(rotate_X(-75,75,-angle),rotate_Y(-75,75,-angle));
	leftBotAngle(rotate_X(-75,75,-angle),rotate_Y(-75,75,-angle));
	//правый нижний круг
	rightBotCircle(rotate_X(75,75,-angle),rotate_Y(75,75,-angle));
	rightBotAngle(rotate_X(75,75,-angle),rotate_Y(75,75,-angle));
	ctx.fill();
	Animation();
 
}
function Animation(){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="blue";
	ctx.fillRect(-250,-250,500,500);
	if(check==0){//поворот влево (круги)
		leftTopCircle(rotate_X(-75,-75,-angle),rotate_Y(-75,-75,-angle));
		rightTopCircle(rotate_X(75,-75,-angle),rotate_Y(75,-75,-angle));
		leftBotCircle(rotate_X(-75,75,-angle),rotate_Y(-75,75,-angle));
		rightBotCircle(rotate_X(75,75,-angle),rotate_Y(75,75,-angle));
		rect(rotate_X(-75,-75,angle),rotate_Y(-75,-75,angle),rotate_X(75,-75,angle),rotate_Y(75,-75,angle),rotate_X(75,75,angle),rotate_Y(75,75,angle),rotate_X(-75,75,angle),rotate_Y(-75,75,angle));//поворот центрального квадрата вправо
		angle+=Math.PI/180;
			if(angle>Math.PI/2+0.0001){
			check=1;
			angle=0;
			}
	}
	else{
	//повороты кругов вправо
		leftTopCircle(rotate_X(-75,-75,angle),rotate_Y(-75,-75,angle));
		leftTopAngle(rotate_X(-75,-75,angle),rotate_Y(-75,-75,angle));
 
		rightTopCircle(rotate_X(75,-75,angle),rotate_Y(75,-75,angle));
		rightTopAngle(rotate_X(75,-75,angle),rotate_Y(75,-75,angle));
 
		leftBotCircle(rotate_X(-75,75,angle),rotate_Y(-75,75,angle));
		leftBotAngle(rotate_X(-75,75,angle),rotate_Y(-75,75,angle));
 
		rightBotCircle(rotate_X(75,75,angle),rotate_Y(75,75,angle));
		rightBotAngle(rotate_X(75,75,angle),rotate_Y(75,75,angle));
 
		angle+=Math.PI/180;
		if(angle+0.00001>Math.PI/2){
		check=0;
		angle=0;
		}
	}
	requestAnimFrame(Animation);
}
function leftTopCircle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="white";
	ctx.arc(X0,Y0,65,0,2*Math.PI);
	ctx.fill();
}
function rightTopCircle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="white";
	ctx.arc(X0,Y0,65,0,2*Math.PI);
	ctx.fill();
}
function leftBotCircle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="white";
	ctx.arc(X0,Y0,65,0,2*Math.PI);
	ctx.fill();
}
function rightBotCircle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="white";
	ctx.arc(X0,Y0,65,0,2*Math.PI);
	ctx.fill();
}
function rect(X0,Y0,X1,Y1,X2,Y2,X3,Y3){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.fillStyle="blue";
	ctx.beginPath();
	ctx.moveTo(X0,Y0);
	ctx.lineTo(X1,Y1);
	ctx.lineTo(X2,Y2);
	ctx.lineTo(X3,Y3);
	ctx.fill();
}
 
function leftTopAngle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="blue";
	ctx.moveTo(X0,Y0);
	ctx.arc(X0,Y0,66,0-(angle*3),Math.PI/2-(angle*3));
	ctx.closePath();
	ctx.fill();
}
function rightTopAngle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="blue";
	ctx.moveTo(X0,Y0);
	ctx.arc(X0,Y0,66,Math.PI/2-(angle*3),Math.PI-(angle*3));
	ctx.closePath();
	ctx.fill();
}
function leftBotAngle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="blue";
	ctx.moveTo(X0,Y0);
	ctx.arc(X0,Y0,66,3*Math.PI/2-(angle*3),0-(angle*3));
	ctx.closePath();
	ctx.fill();
}
function rightBotAngle(X0,Y0){
	var ctx = document.getElementById("paint").getContext("2d");
	ctx.beginPath();
	ctx.fillStyle="blue";
	ctx.moveTo(X0,Y0);
	ctx.arc(X0,Y0,66,Math.PI-(angle*3),3*Math.PI/2-(angle*3));
	ctx.closePath();
	ctx.fill();
}
 
function rotate_X(x, y,newAngle){ // Поворот по X
	return x * Math.cos(newAngle) - y * Math.sin(newAngle);
 
}
function rotate_Y(x, y,newAngle){ // Поворот по Y
	return x * Math.sin(newAngle) + y * Math.cos(newAngle);
}