холст неровные края горе с линиями / штрихами

Question

У меня небольшая проблема с нарисованными линиями на холсте,

По сути, я хочу, чтобы линии были красивыми, мягкими и полупрозрачными, однако холст, кажется, хочет сделать это только с последним отрисованным сегментом линии.

Посмотрите здесь, вы увидите, что последний нарисованный отрезок линии хорош и ... ну, как я этого хочу), однако при воспроизведении анимации линии, нарисованные ранее, становятся все неровными и неприятными.

Я заметил, что если я использую closepath, этого не произойдет, однако, из-за интервала / анимации я не могу использовать этот каждый рендер, так как линия проходит повсюду:

http://jsfiddle.net/xSPuM/1/

У кого-нибудь есть идеи, как остановить это, я был бы очень признателен.

Большое спасибо A

Answer 1

Странный код!Анимация изящна, хотя способ сделать это кажется немного уникальным, поэтому давайте взглянем.

Прежде всего, чтобы быть полностью ясным, когда вы создаете путь, вы можете продолжать обводить его снова и снова.

Таким образом, если у вас есть путь с тремя отрезками A, B, C и вы делаете:

A, штрих, B, штрих, C, штрих

Вы будетеполучить сегмент A 3 раза, B 2 раза и C. 1 раз.

По сути, это то, что вы здесь делаете.

Этого легко избежать, поглаживая только один раз в концевашего пути:

http://jsfiddle.net/xSPuM/5/

Это останавливает анимацию, но иллюстрирует, в чем проблема.Вы можете исправить анимацию, очистив экран.Таким образом, с сегментами ABC мы будем делать:

A, очистка, обводка, B, очистка, обводка, C, очистка, обводка

Тогда вы получите один раз обводку сегмента A,экран очищается, а затем сегмент AB ударяется один раз, и экран очищается в последний раз, поэтому сегмент ABC ударяется один раз.Это то, что вы хотите.

Проблема в том, что очистка экрана означает очистку всех ранее нарисованных фигур!См. Здесь:

http://jsfiddle.net/xSPuM/7/

Есть несколько способов исправить это:

1. Сохранить объект, который рисуется в данный момент на временном холсте (может быть сложно)
2. Сохранить ранее нарисованное состояние на временном холсте (менее хитро)
3. Следите за тремя путями, как если бы они были одним путем (легко, peasy, поэтому я сделаю это для вас)

Чтобы сделать # 3, все, что нам нужно сделать, это не вызывать beginPath в начале каждой новой части.Вместо этого мы вызываем beginPath только один раз в самом начале, и каждая новая часть - это просто moveTo операция!

http://jsfiddle.net/xSPuM/8/

Этого должно быть достаточно для того, чтобы вы были на связиправильный путь!