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

Вход на сайт

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

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

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

Спасибо за статью. Я не Ваш студент. Но мне она помогла написать функцию для Канторова множества на Python для черепашки: import turtle def kanter(x, y, d):     if d > 1:         turtle...
Как реализовать в данном примере границы расчёта?

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

Рейтинг@Mail.ru Яндекс.Метрика
Язык программирования: 
Javascript
Среда программирования: 
Любая

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="margin: 0; height: 100vh;">
<script type="text/javascript">
var canvasElem= document.createElement('canvas');    //создаем канвас
canvasElem.id = "canvas";   
canvasElem.width  = 600;   
canvasElem.height = 600;    
canvasElem.style.margin = 'auto';    
canvasElem.style.display = 'flex';    
document.body.appendChild(canvasElem);   
canvas = canvasElem.getContext('2d');  
canvasX = canvasElem.width;    
canvasY = canvasElem.height;
 
var t1=0,ang=0,ang1=0;
 
function draw() {
	if (ang>=-14.2*Math.PI) { 
		canvas.clearRect(0,0,600,600);
		ang-=Math.PI/2;
		t1+=25/29; 
		canvas.fillStyle='black';
		canvas.beginPath();        //1 этап- анимируем квадраты
		canvas.moveTo(225-35*Math.cos((ang+45)*Math.PI/180)+12/5*t1,125-35*Math.sin((ang+45)*Math.PI/180)-t1);
		canvas.lineTo(225+35*Math.cos((ang+135)*Math.PI/180)+12/5*t1,125+35*Math.sin((ang+135)*Math.PI/180)-t1);
		canvas.lineTo(225+35*Math.cos((ang+45)*Math.PI/180)+12/5*t1,125+35*Math.sin((ang+45)*Math.PI/180)-t1);
		canvas.lineTo(225-35*Math.cos((ang+135)*Math.PI/180)+12/5*t1,125-35*Math.sin((ang+135)*Math.PI/180)-t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
		canvas.beginPath();
		canvas.moveTo(285-35*Math.cos((ang+90)*Math.PI/180)+12/5*t1,100-35*Math.sin((ang+90)*Math.PI/180)+t1);
		canvas.lineTo(285+35*Math.cos(ang*Math.PI/180)+12/5*t1,100+35*Math.sin(ang*Math.PI/180)+t1);
		canvas.lineTo(285+35*Math.cos((ang+90)*Math.PI/180)+12/5*t1,100+35*Math.sin((ang+90)*Math.PI/180)+t1);
		canvas.lineTo(285-35*Math.cos(ang*Math.PI/180)+12/5*t1,100-35*Math.sin(ang*Math.PI/180)+t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
		canvas.beginPath();
		canvas.moveTo(345-35*Math.cos((ang+45)*Math.PI/180)+t1,125-35*Math.sin((ang+45)*Math.PI/180)+12/5*t1);
		canvas.lineTo(345+35*Math.cos((ang+135)*Math.PI/180)+t1,125+35*Math.sin((ang+135)*Math.PI/180)+12/5*t1);
		canvas.lineTo(345+35*Math.cos((ang+45)*Math.PI/180)+t1,125+35*Math.sin((ang+45)*Math.PI/180)+12/5*t1);
		canvas.lineTo(345-35*Math.cos((ang+135)*Math.PI/180)+t1,125-35*Math.sin((ang+135)*Math.PI/180)+12/5*t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
		canvas.beginPath();
		canvas.moveTo(370-35*Math.cos((ang+90)*Math.PI/180)-t1,185-35*Math.sin((ang+90)*Math.PI/180)+12/5*t1);
		canvas.lineTo(370+35*Math.cos(ang*Math.PI/180)-t1,185+35*Math.sin(ang*Math.PI/180)+12/5*t1);
		canvas.lineTo(370+35*Math.cos((ang+90)*Math.PI/180)-t1,185+35*Math.sin((ang+90)*Math.PI/180)+12/5*t1);
		canvas.lineTo(370-35*Math.cos(ang*Math.PI/180)-t1,185-35*Math.sin(ang*Math.PI/180)+12/5*t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
		canvas.beginPath();
		canvas.moveTo(345-35*Math.cos((-ang+45)*Math.PI/180)-12/5*t1,245-35*Math.sin((-ang+45)*Math.PI/180)+t1);
		canvas.lineTo(345+35*Math.cos((-ang+135)*Math.PI/180)-12/5*t1,245+35*Math.sin((-ang+135)*Math.PI/180)+t1);
		canvas.lineTo(345+35*Math.cos((-ang+45)*Math.PI/180)-12/5*t1,245+35*Math.sin((-ang+45)*Math.PI/180)+t1);
		canvas.lineTo(345-35*Math.cos((-ang+135)*Math.PI/180)-12/5*t1,245-35*Math.sin((-ang+135)*Math.PI/180)+t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
		canvas.beginPath();
		canvas.moveTo(285-35*Math.cos((-ang+90)*Math.PI/180)-12/5*t1,270-35*Math.sin((-ang+90)*Math.PI/180)-t1);
		canvas.lineTo(285+35*Math.cos(-ang*Math.PI/180)-12/5*t1,270+35*Math.sin(-ang*Math.PI/180)-t1);
		canvas.lineTo(285+35*Math.cos((-ang+90)*Math.PI/180)-12/5*t1,270+35*Math.sin((-ang+90)*Math.PI/180)-t1);
		canvas.lineTo(285-35*Math.cos(-ang*Math.PI/180)-12/5*t1,270-35*Math.sin(-ang*Math.PI/180)-t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
		canvas.beginPath();
		canvas.moveTo(225-35*Math.cos((-ang+45)*Math.PI/180)-t1,245-35*Math.sin((-ang+45)*Math.PI/180)-12/5*t1);
		canvas.lineTo(225+35*Math.cos((-ang+135)*Math.PI/180)-t1,245+35*Math.sin((-ang+135)*Math.PI/180)-12/5*t1);
		canvas.lineTo(225+35*Math.cos((-ang+45)*Math.PI/180)-t1,245+35*Math.sin((-ang+45)*Math.PI/180)-12/5*t1);
		canvas.lineTo(225-35*Math.cos((-ang+135)*Math.PI/180)-t1,245-35*Math.sin((-ang+135)*Math.PI/180)-12/5*t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
		canvas.beginPath();
		canvas.moveTo(200-35*Math.cos((-ang+90)*Math.PI/180)+t1,185-35*Math.sin((-ang+90)*Math.PI/180)-12/5*t1);
		canvas.lineTo(200+35*Math.cos(-ang*Math.PI/180)+t1,185+35*Math.sin(-ang*Math.PI/180)-12/5*t1);
		canvas.lineTo(200+35*Math.cos((-ang+90)*Math.PI/180)+t1,185+35*Math.sin((-ang+90)*Math.PI/180)-12/5*t1);
		canvas.lineTo(200-35*Math.cos(-ang*Math.PI/180)+t1,185-35*Math.sin(-ang*Math.PI/180)-12/5*t1);
		canvas.closePath();
		canvas.stroke();
		canvas.fill();
	}
	else if (ang1>=-14.2*Math.PI) {
		canvas.clearRect(0,0,600,600);
		canvas.beginPath();        //2 этап- анимация звезды    (285,185)
		canvas.moveTo(200,100);
		canvas.lineTo(250,100);
		canvas.lineTo(285,65);
		canvas.lineTo(320,100);
		canvas.lineTo(370,100);
		canvas.lineTo(370,150);
		canvas.lineTo(405,185);
		canvas.lineTo(370,220);
		canvas.lineTo(370,270);
		canvas.lineTo(320,270);
		canvas.lineTo(285,305);
		canvas.lineTo(250,270);
		canvas.lineTo(200,270);
		canvas.lineTo(200,220);
		canvas.lineTo(165,185);
		canvas.lineTo(200,150);
		canvas.closePath();
		canvas.stroke();
		canvas.fillStyle='black';
		canvas.fill();
		ang1-=Math.PI/2;
		canvas.beginPath();
		canvas.moveTo(285-35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180),185-85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285+50*Math.sin(-ang1*Math.PI/180),185-50*Math.cos(-ang1*Math.PI/180));
		canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180),185-85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180));	
		canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285+85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180));		
		canvas.lineTo(285+50*Math.cos(-ang1*Math.PI/180),185+50*Math.sin(-ang1*Math.PI/180));			
		canvas.lineTo(285+85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180),185+85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285-50*Math.sin(-ang1*Math.PI/180),185+50*Math.cos(-ang1*Math.PI/180));
		canvas.lineTo(285-35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180),185+85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285-35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285-85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285-50*Math.cos(-ang1*Math.PI/180),185-50*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285-85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180));
		canvas.lineTo(285-35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180));
		canvas.closePath();
		canvas.stroke();
		canvas.fillStyle='white';
		canvas.fill();
	}
	else {
	t1=0;
	ang=0;
	ang1=0;
	}
}
draw();
setInterval(draw, 50);  //производим анимацию
</script>
</body>
</html>

Прикрепленный файлРазмер
Square and Star.rar1.19 кб