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

Вход на сайт

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

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

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

Как реализовать в данном примере границы расчёта?
Не работает, выводит это: Process terminated with status 4258096 (0 minute(s), 2 second(s)) при этом открывается консоль с тем же числом

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

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

<!doctype html>
<html>
    <head>
        <title>Flag</title>
        <meta charset='utf-8' />
    </head>
    <body style="margin:0px;">
        <canvas id="c" width="500" height="500" 
         style="background-color:white;width:500px;height:500px;
         position:absolute;left:10%;top:10%;border:1px solid black;">Обновите браузер</canvas>
 
        <script>
var c = document.getElementById("c"); //Определение контекста рисования
var w = c.width; // устанавливаем ширину
var h = c.height; //устанавливаем высоту
var ctx = c.getContext("2d"); // преобразуем контекст
var yk = 15; // как сильно флаг будет подниматся по игрику
var xk = 32; // как будет растягиватся по иксу
var pi = 3.14; 
var corn = 1; // скорость перемещения флага вверх вниз
var cy =0; // смещение по y
var speed =5; // скорость развеевания флага
var x,y; // сами кординаты
var t=0; // тут будет хранится текущая скорость
var chx = 1; // для того чтоб в if 2 раза не входить заведем эту переменную 
var ysh = 10, xsh = 10; // на сколько будет смещена тень
var heightCord = 50; // высота 1 линии флага
var heightFirst = 4, heightDouble = 1.3; // отвечают за то, где будет прорисована 1 линия флага и 2
var cornerLines = 0.2; // угол под которым флаг развивается
 
 
function Draw() { // сама функция рисования
	ctx.clearRect(0, 0, w, h);	// очищаем все и начинаем рисовать
	ctx.beginPath();
	ctx.fillStyle='rgba(0, 0, 0, 0.3)'; // устанавливаем цвет заливки
	// начинаем рисовать тень
	for(var x=0-t,gy=0; x+t<w-pi*xk; x++, gy+=cornerLines){  // тут рисуем верхнию линии тени
		y=yk*Math.sin(x/xk);		// рисуем по формуле синуса
		ctx.lineTo(x+t+xsh,y+h/heightFirst+cy-gy+ysh);
	}		
	for(; x>0-t; x--, gy-=cornerLines){// тут рисуем нижнию линии тени
		y=yk*Math.sin(x/xk);		// рисуем по формуле синуса
		ctx.lineTo(x+t+xsh,y+h/heightDouble+cy-gy+ysh); // проводим линию
	}
	ctx.fill(); // заливаем все
 
	/*теперь абсолютно также рисуем красную часть флага*/
	ctx.beginPath();
	ctx.fillStyle='red';
	for(var x=0-t,gy=0; x+t<w-pi*xk; x++, gy+=cornerLines){
		y=yk*Math.sin(x/xk);		
		ctx.lineTo(x+t,y+h/heightFirst+cy-gy);
	}		
	for(; x>0-t-pi*xk; x--, gy-=cornerLines){
		y=yk*Math.sin(x/xk);		
		ctx.lineTo(x+t,y+h/heightDouble+cy-gy);
	}	
	ctx.fill();
}
 
setInterval(function(){
	t+=speed; // увеличиваем скорость
	if(cy<=heightCord && !chx){ // поднимаем флаг вверх chx=1 -движение вверх
		cy-=corn; // поднимаем
		if(0>=cy){// тут проверка, подняли ли мы его до конца
			chx=1;
		}
	}
	if(cy<=heightCord && chx){// опускаем флаг вниз chx=0 -движение вниз
		cy+=corn; // опускаем
		if(cy>=heightCord){ // такая же проверка опустили ли мы его
			chx=0;
		}		
	}
	if(t>w){
		t=0-pi*xk;	// если координата волны дошла до конца, вернуть ее обратно	
	}
	Draw(); // после того как осуществили манипуляции с кординатами заного все рисуем
},30);
        </script>
    </body>
</html>

Прикрепленный файлРазмер
flag.zip3.08 кб