Цветок на подоконнике
Фон отрисовывается функцией drawWall(), включающую в себя заливку всего полотна цветом, и случайным расположением спиралей.
Спирали генерируются функцией drawSpiral(). Получается подобие обоев с узорами.
Далее отрисовывается вид за окном. А именно небо, море, кораблик, облака и чайки:
function drawGlassAndOutside() { ctx.fillStyle = ''; ctx.fillRect(); //небо drawWaves(); //волны drawShip(); //кораблик drawCloud(); //облака ... drawSeagull(); //чайки }
Следующим мы рисуем окно, а точнее оконную раму, створку с ручкой, подоконник и углы, чтобы был эффект 3д:
function drawWindow() { // окно drawFrame(); //рама ctx.fillStyle = ''; ctx.fillRect(); // перегородка drawFrame(); //створка drawHandle(); // ручка drawWindowSill(); // подоконник ctx.lineWidth = 1; ctx.strokeRect(); //обводка окна drawCornerFaces(); // угловые грани }
Отрисовка горшка разделена на 2 функции.
Функция drawFlowerPot() передает параметры в функцию flowerPot(), а она в свою очередь отрисовывает эллипсы, прямые и заливает цветом. Так было сделано по пому, что горшок состоит из повторяющихся элементов.
Цветок отрисовывается так:
function drawFlower() { // цветок drawStem(); // стебель drawBezierCurve(); // лист drawBezierCurve(); // лист drawCircle(); // серединка drawPetals(); // лепестки drawCircle(); // серединка drawStar(); // звезда
}
Где:
drawStem() содержит координаты и другие параметры для построения В-сплайна, и запускает функцию drawBSpline().
drawBSpline() рисует В-сплайн.
drawBezierCurve() рисует листики с помощью кривых Безье.
drawCircle() - это функция для построения окружностей.
drawPetals() содержит в себе цикл для рисования нескольких лепестков, и запускает функцию drawCircle().
drawStar() рисует звезду по заданным ей параметрам: координаты X и Y, количество лучей, внешний радиус, внутренний радиус, цвет.
