---

Данная лабораторная работа создает на html странице анимацию падающего снега (снежинок). Анимация создается инструментом Canvas, встроенным в HTML5.

Первоначально создается html документ с тэгом canvas, имеющим атрибуты: id="canvas" width="900" height="800".

С помощью css стиля, фон html страницы заполняется картинкой для создания зимнего пейзажа:

background:url("backgroundAnimation.png");

Основной компонент анимации -- JavaScript скрипт. Снежинки движутся разнонаправленно, с различной скоростью, размер снежинок меняется.

 

 

	var canvas; 
	//количество снежинок в массиве:
	const snowFlakes_N = 30; 
	// массив снежинок:
	var cors = [];
	//создание снежинок: позиция x, y, скорость speed, размер scale. Вспомогательные атрибуты для анимации counter и sign:
	for(v=0; v < snowFlakes_N; v++){
	cors.push({x:selfRandom(0,900),y:selfRandom(0,800), speed: 2 + Math.random() * 40, counter:0, sign:Math.random() < 0.5 ? 1 : -1, scale: 50});
	}
	function initiate(){
		var elem = document.getElementById('canvas');
		canvas = elem.getContext('2d'); 
		plan(); 
	}
	function plan(){
		// холст 800px по горизонтали, 900px по вертикали:
		canvas.clearRect(0,0,900,800);
		//задание изображения снежинки из файла:	
		img = document.createElement('img');
		img.setAttribute('src', 'Snowflake-png.png');
		//анимация: отрисовать каждую снежинку из массива и поменять её атрибуты для следующего кадра
		for(a=0; a < cors.length; a++){
			// рисование снежинки в позиции x, y, размером scale:
			canvas.drawImage(img, cors[a].x, cors[a].y, cors[a].scale, cors[a].scale);
			// используем тригонометрию, чтобы определить позицию x и y, и масштаб scale:
			cors[a].counter += cors[a].speed / 5000;
			cors[a].x += cors[a].sign * cors[a].speed * Math.cos(cors[a].counter) / 40;
			cors[a].y += Math.sin(cors[a].counter) / 40 + cors[a].speed / 30;
			cors[a].scale = 20 + Math.abs(40 * Math.cos(cors[a].counter));
			// снежинка достигла дна холста, генерируем позицию x, y новой снежинки:
			if(cors[a].y > 800){
				cors[a].x = selfRandom(0,900);
				cors[a].y = 0;
			}				
		}
	//перерисовка кадра анимации:
	requestAnimationFrame(plan);		
	}
	function selfRandom(min, max){
	  return Math.floor(Math.random()*(max-min+1))+min;
	}
	//вызов функции initiate() при загрузке html страницы:
	addEventListener('load',initiate);