Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2015, 19:46
Новичок на форуме
Отправить личное сообщение для d4gons Посмотреть профиль Найти все сообщения от d4gons
 
Регистрация: 12.04.2015
Сообщений: 3

Три линии двигаются за курсором
Здравствуйте.
Возникла проблема с отрисовкой анимации, тыкался во все форумы, не смог найти ничего подходящего.
Нужно, чтобы от 1 элемента к курсору тянулись три линии, на определенной площади, как только мы выводим мышку из этой площади, линии пропадают, вводим обратно - притягиваются к курсору.
Анимация на подобие в этом видео http://videosmile.ru/lessons/read/ef...na-plexus.html
Ответить с цитированием
  #2 (permalink)  
Старый 13.04.2015, 15:36
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<html>
<head>
<style>
    html, body {
       padding: 0;
       margin: 0;
    }
    canvas {
        background-color: #eee;
    }
    </style>
</head>
<body>
<canvas></canvas>
    <script>

    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    canvas.addEventListener("mousemove", function (e) {
        canvas.width = canvas.width;

        ctx.strokeStyle = "red";
        ctx.moveTo(0.5, canvas.height);
        ctx.lineTo(e.pageX + 0.5, e.pageY + 0.5);
        ctx.moveTo(canvas.width + 0.5, canvas.height + 0.5);
        ctx.lineTo(e.pageX + 0.5, e.pageY + 0.5);
        ctx.moveTo(canvas.width/2 + 0.5, 0.5);
        ctx.lineTo(e.pageX + 0.5, e.pageY + 0.5);
        ctx.stroke();

    }, false);

    </script>
</body>
</html>

Последний раз редактировалось tsigel, 13.04.2015 в 16:14.
Ответить с цитированием
  #3 (permalink)  
Старый 13.04.2015, 15:47
Новичок на форуме
Отправить личное сообщение для d4gons Посмотреть профиль Найти все сообщения от d4gons
 
Регистрация: 12.04.2015
Сообщений: 3

ничего не вижу...
Ответить с цитированием
  #4 (permalink)  
Старый 13.04.2015, 15:53
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Поправил, работает
Ответить с цитированием
  #5 (permalink)  
Старый 13.04.2015, 16:54
Новичок на форуме
Отправить личное сообщение для d4gons Посмотреть профиль Найти все сообщения от d4gons
 
Регистрация: 12.04.2015
Сообщений: 3

Большое спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Три управляющтх кнопки, три положения pensill Events/DOM/Window 0 07.03.2015 14:04
Три блока = три столбца Sherminator Элементы интерфейса 2 18.10.2013 00:16
canvas - нарисовать линии Valentinka_1 Общие вопросы Javascript 1 09.05.2013 21:51
Движение объекта за курсором Алексаднр Элементы интерфейса 2 23.10.2011 21:01
Три меняющиеся картинки viktod Ваши сайты и скрипты 49 23.03.2010 04:25