Шалости с элементом canvas: скользящие ленты

В данном уроке мы продемонстрируем возможности работы с элементом canvas. В итоге получится визуальный эффект с разноцветными скользящими лентами. Никакого Flash - сплошной JavaScript.

Разметка для шалости очень проста:

<canvas id="canvas"></canvas>

Также будем использовать немного CSS:

#canvas {
	display: block;
	/*Заполняем элемент canvas черным цветом по умолчанию*/
	background: #000;
}

Все остальное реализовано в JavaScript:

window.onload = function(){
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	//Элемент canvas занимает все доступное пространство
	var W = window.innerWidth, H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	
	//Создаем новые частицы
	var particles = [];
	for(var i = 0; i < 25; i++)
	{
		particles.push(new particle());
	}
	
	function particle()
	{
		//Расположение в элементе canvas 
		this.location = {x: Math.random()*W, y: Math.random()*H};
		//Радиус - устанавливаем равным 0
		this.radius = 0;
		//Скорость
		this.speed = 3;
		//Угол направления в градусах от 0 до 360
		this.angle = Math.random()*360;
		//Цвета
		var r = Math.round(Math.random()*255);
		var g = Math.round(Math.random()*255);
		var b = Math.round(Math.random()*255);
		var a = Math.random();
		this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
	}
	
	//Выводим частицы
	function draw()
	{
		//Перекрашиваем фон
		//Заполним canvas черным
		//Уменьшаем непрозрачность фона
		ctx.globalCompositeOperation = "source-over";
		ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
		ctx.fillRect(0, 0, W, H);
		ctx.globalCompositeOperation = "lighter";
		
		for(var i = 0; i < particles.length; i++)
		{
			var p = particles[i];
			ctx.fillStyle = "white";
			ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
			
			//Сдвигаем частицы
			//Созадем набор частиц сдвинутых в произвольном направлении
			//с такой же скоростью
			for(var n = 0; n < particles.length; n++)
			{
				var p2 = particles[n];
				//Вычисляем дистанциюпо отнешению к другим частицам
				var yd = p2.location.y - p.location.y;
				var xd = p2.location.x - p.location.x;
				var distance = Math.sqrt(xd*xd + yd*yd);
				//Выводим линию между обеими частицами, если дистанция между ними в диапазоне 200px
				if(distance < 200)
				{
					ctx.beginPath();
					ctx.lineWidth = 1;
					ctx.moveTo(p.location.x, p.location.y);
					ctx.lineTo(p2.location.x, p2.location.y);
					ctx.strokeStyle = p.rgba;
					ctx.stroke();
					//Теперь появлется лента
				}
			}
			
			//Используем похожий вектор
			//Новый x = старый x + скорость * cos(угол)
			p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
			//Новый y = старый y + скорость * sin(угол)
			p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
			
			if(p.location.x < 0) p.location.x = W;
			if(p.location.x > W) p.location.x = 0;
			if(p.location.y < 0) p.location.y = H;
			if(p.location.y > H) p.location.y = 0;
		}
	}
	
	setInterval(draw, 30);
}


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/aNPkPLAyWHA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Шалости с элементом canvas: скользящие ленты | | 2012-12-15 21:05:10 | | Статьи Web-мастеру | | В данном уроке мы продемонстрируем возможности работы с элементом canvas. В итоге получится визуальный эффект с разноцветными скользящими лентами. Никакого Flash - сплошной JavaScript.Разметка для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: