Шалости с элементом 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);

}

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: thecodeplayer.com/walkthrough/glazing-ribbon-screensaver-effect-in-html5-canvas
Перевел: Сергей Фастунов