Javascript.RU

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

анимация кривой по точкам
Люди есть классная функция которая дает возможность анимировать кривую по точкам http://habrahabr.ru/post/249103/ но проблема в том что при возврате кривой или при пересечении возникает сбой координат, помогите пожалуйста исправить этот факт, на примере должна прорисовываться буква L как на лого но происходит сбой при возарате
http://lhotel.com.ua
Ответить с цитированием
  #2 (permalink)  
Старый 06.06.2015, 23:18
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

http://w3pro.ru/article/html-5-canva...chinayushchikh
Это во первых.
Во вторых дам вам совет использовать фразу
context.closePath();

Или же назначать новый
context1 = canvas.getContext("2d");


В третьих, можно посмотреть сорсы ресурса который вы привели в пример.
var cnv = document.getElementById('round_cnv');
var cnt = cnv.getContext('2d');
var pi = Math.PI;
cnt.lineWidth = 1;
cnt.strokeStyle = "#FFF";
cnt.arc(16, 16, 12, 0, 2*pi, true);
cnt.stroke();

var cnt2 = cnv.getContext('2d');
cnt2.lineWidth = 3;
cnt2.strokeStyle = "#FFF";
cnt2.fillStyle = "white";
cnt2.fill();
cnt2.arc(16, 16, 7, 0, 2*pi, true);
cnt2.stroke();


var cnv2 = document.getElementById('round_cnv2');
var cnt2 = cnv2.getContext('2d');
cnt2.lineWidth = 1;
cnt2.strokeStyle = "#FFF";
cnt2.arc(16, 16, 12, 0, 2*pi, true);
cnt2.stroke();

var cnt3 = cnv2.getContext('2d');
cnt3.lineWidth = 3;
cnt3.strokeStyle = "#FFF";
cnt3.fillStyle = "white";
cnt3.fill();
cnt3.arc(16, 16, 7, 0, 2*pi, true);
cnt3.stroke();

var cnv3 = document.getElementById('round_cnv3');
var cnt3 = cnv3.getContext('2d');
cnt3.lineWidth = 1;
cnt3.strokeStyle = "#FFF";
cnt3.arc(16, 16, 12, 0, 2*pi, true);
cnt3.stroke();

var cnt4 = cnv3.getContext('2d');
cnt4.lineWidth = 3;
cnt4.strokeStyle = "#FFF";
cnt4.fillStyle = "white";
cnt4.fill();
cnt4.arc(16, 16, 7, 0, 2*pi, true);
cnt4.stroke();


Тут прекрасно видно что человек использовал второе предложенное мною решение.
Лично по моему мнению это не совсем верно в случае одного canvasа.
Но это моё личное мнение.
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2015, 15:19
Профессор
Отправить личное сообщение для imedia Посмотреть профиль Найти все сообщения от imedia
 
Регистрация: 20.05.2014
Сообщений: 292

Есть вот такое решение я его выбрал http://jsfiddle.net/halflling/qDucr/ но появился вопрос как постепенно стереть написанную линию по тем же точкам?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Анимация gif картинки при нажатии на ссылку ainur777 Общие вопросы Javascript 2 06.07.2014 16:23
Не работает анимация при загрузки ajax ArtOs Общие вопросы Javascript 0 24.05.2012 17:52
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20