Chess room

25. Ноябрь 2019 - 7:40 | Гапон Александра

Язык программирования:

Javascript

Среда программирования:

Notepad++

<html> 
<head> 
<meta charset="utf-8">
</head> 
<body> 
<canvas id="fl" width="500" height="500"></canvas> <br />
<script type="text/javascript">
var canvas = document.getElementById('fl')
var ctx=canvas.getContext('2d');
//коэфициент изменения угла для i-го квадрата
//(от самого большого до самого маленького):
var l1=0;
var l2=0;
var l3=0;
var l4=0;
var l5=0;
//
setInterval(draw,50);
ctx.beginPath();
ctx.fillRect(0,0,500,500);//заливка основного квадрата
ctx.closePath();
function draw()
{
	//рисуем каждый квадрат
	//(от самого большого до самого маленького):
	draw1(1,l1);
	l1+=0.01;
	if(l1>=18)//после полного поворота
		l1=0;//начинаем заново
	draw1(2,l2);
	l2+=0.02;
	if(l2>=18)
		l2=0;
	draw1(3,l3);
	l3+=0.03;
	if(l3>=18)
		l3=0;
	draw1(4,l4);
	l4+=0.04;
	if(l4>=18)
		l4=0;
	draw1(5,l5);
	l5+=0.05;
	if(l5>=18)
		l5=0;
}
function draw1(sc,k)//функция отрисовки квадрата со стороной длины 60*(6-sc) 
{ //k-коэфициент изменения угла
	ctx.beginPath();
	ctx.clearRect(70+30*sc,30*sc+70,60*(6-sc),60*(6-sc));
	ctx.closePath();
	var t,p;
	for(var i=0;i<18;i+=2)
	{
		if((i+k)>=18)
			t=i+k-18;
		else
			t=i+k;
		if((i+k+1)>=18)
			p=i+k+1-18;
		else 
			p=t+1;
		a1=Math.PI/9*t+Math.PI/4;
		a2=Math.PI/9*p+Math.PI/4;
		if(a1>=Math.PI/4&&a1<Math.PI/4*3&&a2>=Math.PI/4&&a2<Math.PI/4*3)//движ по нижн стороне
		{
			y1=30*(6-sc);
			m=Math.abs(y1/Math.sin(a1));
			x1=Math.cos(a1)*m;
			y2=30*(6-sc);
			m=Math.abs(y2/Math.sin(a2));
			x2=Math.cos(a2)*m;
			make(i,x1,y1,x2,y2,sc);
		}	
		if(a1>=Math.PI/4&&a1<Math.PI/4*3&&a2>=Math.PI/4*3&&a2<Math.PI/4*5)//лев нижн угол
		{
			y1=30*(6-sc);
			m=Math.abs(y1/Math.sin(a1));
			x1=Math.cos(a1)*m;
			x2=-30*(6-sc);
			m=Math.abs(x2/Math.cos(a2));
			y2=Math.sin(a2)*m;
			makeang(i,x1,y1,x2,y2,70+30*sc,430-30*sc,sc);
		}
		if(a1>=Math.PI/4*3&&a1<Math.PI/4*5&&a2>=Math.PI/4*3&&a2<Math.PI/4*5)//движ по лев стороне
		{
			x1=-30*(6-sc);
			m=Math.abs(x1/Math.cos(a1));
			y1=Math.sin(a1)*m;
			x2=-30*(6-sc);
			m=Math.abs(x2/Math.cos(a2));
			y2=Math.sin(a2)*m;
			make(i,x1,y1,x2,y2,sc);
		}
		if(a1>=Math.PI/4*3&&a1<Math.PI/4*5&&a2>=Math.PI/4*5&&a2<Math.PI/4*7)//лев верхн угол
		{
			x1=-30*(6-sc);
			m=Math.abs(x1/Math.cos(a1));
			y1=Math.sin(a1)*m;
			y2=-30*(6-sc);
			m=Math.abs(y2/Math.sin(a2));
			x2=Math.cos(a2)*m;
			makeang(i,x1,y1,x2,y2,70+30*sc,70+30*sc,sc);
		}
		if(a1>=Math.PI/4*5&&a1<Math.PI/4*7&&a2>=Math.PI/4*5&&a2<Math.PI/4*7)//движ по верх стороне
		{
			y1=-30*(6-sc);
			m=Math.abs(y1/Math.sin(a1));
			x1=Math.cos(a1)*m;
			y2=-30*(6-sc);
			m=Math.abs(y2/Math.sin(a2));
			x2=Math.cos(a2)*m;
			make(i,x1,y1,x2,y2,sc);
		}
		if(a1>=Math.PI/4*5&&a1<Math.PI/4*7&&a2>=Math.PI/4*7&&a2<Math.PI/4*9)//прав верхн угол
		{
			y1=-30*(6-sc);
			m=Math.abs(y1/Math.sin(a1));
			x1=Math.cos(a1)*m;
			x2=30*(6-sc);
			m=Math.abs(x2/Math.cos(a2));
			y2=Math.sin(a2)*m;
			makeang(i,x1,y1,x2,y2,430-30*sc,30*sc+70,sc);
		}
		if(a1>=Math.PI/4*7&&a1<Math.PI/4*9&&a2>=Math.PI/4*7&&a2<Math.PI/4*9)//движ по прав стороне
		{
			x1=30*(6-sc);
			m=Math.abs(x1/Math.cos(a1));
			y1=Math.sin(a1)*m;
			x2=30*(6-sc);
			m=Math.abs(x2/Math.cos(a2));
			y2=Math.sin(a2)*m;
			make(i,x1,y1,x2,y2,sc);
		}	
		if(a1>=Math.PI/4*7&&a1<Math.PI/4*9&&a2>=Math.PI/4&&a2<Math.PI/4*3)//прав нижн угол
		{
			x1=30*(6-sc);
			m=Math.abs(x1/Math.cos(a1));
			y1=Math.sin(a1)*m;
			y2=30*(6-sc);
			m=Math.abs(y2/Math.sin(a2));
			x2=Math.cos(a2)*m;
			makeang(i,x1,y1,x2,y2,430-30*sc,430-30*sc,sc);
		}
	}
}
function make(j,x0,y0,x,y,a)//заливаем сектор, ограниченный стороной
{
	ctx.beginPath();
	ctx.moveTo(250,250);
	ctx.lineTo(x0+250,y0+250);
	ctx.lineTo(x+250,y+250);
	ctx.lineTo(250,250);
	ctx.fill();
	ctx.closePath();
	ctx.beginPath();
	ctx.lineWidth=1-a/4;
	ctx.strokeStyle="#FF0C00";
	ctx.moveTo(250,250);
	ctx.lineTo(x0+250,y0+250);
	ctx.stroke();
	ctx.closePath();
	ctx.beginPath();
	ctx.strokeStyle="#1000FF";
	ctx.moveTo(250,250);
	ctx.lineTo(x+250,y+250);
	ctx.stroke();
	ctx.closePath();
}
function makeang(j,x0,y0,x,y,xa,ya,a)//заливаем сектор, ограниченный двумя сторонами
{
	ctx.beginPath();
	ctx.moveTo(250,250);
	ctx.lineTo(x0+250,y0+250);
	ctx.lineTo(xa,ya);
	ctx.lineTo(x+250,y+250);
	ctx.lineTo(250,250);
	ctx.fill();
	ctx.closePath();
	ctx.beginPath();
	ctx.lineWidth=1-a/4;
	ctx.strokeStyle="#FF0C00";
	ctx.moveTo(250,250);
	ctx.lineTo(x0+250,y0+250);
	ctx.stroke();
	ctx.closePath();
	ctx.beginPath();
	ctx.strokeStyle="#1000FF";
	ctx.moveTo(250,250);
	ctx.lineTo(x+250,y+250);
	ctx.stroke();
	ctx.closePath();
}
</script>
</body>
</html>

Прикрепленный файл	Размер
gapon_demo.zip	1.39 кб

Войдите на сайт для отправки комментариев

	Построения на плоскости (2D)
	Графика в пространстве (3D)
	Вычислительная геометрия
	Физическое моделирование
	Фрактальная графика

Уроки, алгоритмы, программы, примеры

Материалы по разделам

Новые комментарии

Счетчики и рейтинг

Chess room