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

Готово!

Добавлено: 14 Апреля 2018 06:37:43 Добавил: Андрей Ковальчук Нравится 0

Добавить