Язык программирования:
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.zip | 3.08 кб |