canvas blur shadow малому элементу

Тема в разделе "JavaScript", создана пользователем sol_los, 20 июл 2015.

Модераторы: ZiX
  1. sol_los

    sol_los

    Регистр.:
    17 окт 2011
    Сообщения:
    291
    Симпатии:
    113
    может быть есть у кого мысль как сделать в определенном месте нормальную тень?
    к примеру мне нужно на какой то элемент наложить тень.
    создаю линию в 1px и отбрасываю тень
    Код:
                        ctx.beginPath();
                        ctx.lineWidth = 1;                   
                        ctx.strokeStyle = '#fff';                  
                        ctx.shadowOffsetY = -10;
                        ctx.shadowOffsetX = 10;
                        ctx.shadowBlur =20;                   
                        ctx.moveTo(10,10 );
                        ctx.lineTo(150,10);                   
                        ctx.stroke();
     
    Однако тень практически не видно. Необходимо создать линию в пикселей 20 что бы получить более темную и яркую тень.
    Создать линию цвета нижнего элемента шириной 20 и сместить - не прокатит, т.к. закроется другой элемент.


    упростил максимально что бы понятно было, вот Перейти по ссылке штуку пытаюсь сделать.
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    непонятно зачем для тени создавать отдельный малый элемент. Если просто для малого элемента создать тень, то надо уменьшить блур и смешение по осям, плюс задать более темный цвет, чем у самого элемента
    Код:
          context.beginPath();
          context.lineWidth = 1;
          context.shadowColor = '#000';
          context.shadowBlur =5;
          context.shadowOffsetY = 2;
          context.shadowOffsetX = 2;
          context.moveTo(10,10 );
          context.lineTo(150,10); 
          context.stroke();
     
  3. sol_los

    sol_los

    Регистр.:
    17 окт 2011
    Сообщения:
    291
    Симпатии:
    113
    да я Перейти по ссылке рисую. в середине не могу создать нахлест правильный.
    не могу понять как задать для элементов z-index, что бы один другой перекрывал но не перекрывал третий.
    как только не пробовал и с globalCompositeOperation морочился - не выходит "заплести"
    вот попробовал сделать два куска stroke и потом втиснуть полосу с тенью. однако по задумке там blur нужен около 30.

    может есть мысль как реализовать?

    вон че Перейти по ссылке при помощи градиента. но это же костыльный костыль
     
    Последнее редактирование модератором: 21 фев 2016
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    т.е. у тебя получается линия пересекается в двух местах и тебе надо сделать чтобы в одном пересечении она нахлестывалась, а во втором нет? Интересненькая задача)
    Мне кажется тут надо как-то комбинировать с globalCompositeOperation, главное изначально выстроить правильную логическую цепочку
     
  5. sol_los

    sol_los

    Регистр.:
    17 окт 2011
    Сообщения:
    291
    Симпатии:
    113
    ага
    да вот всю голову изломал.
     
    Последнее редактирование: 23 июл 2015