HTML5 Canvas Drawing создает новый путь по существующему пути в каждой новой точке.Зачем?

Question

Это сложно объяснить, поэтому я создал JS Fiddle, чтобы показать, что происходит: http://jsfiddle.net/dGdxS/ - (только для Webkit) Просто наведите курсор мыши на холст, чтобы нарисовать - вам может потребоваться щелкнуть вокруг

Я заметил, что производительность холста оказалась не такой, как я ожидал, и когда я установил альфа-линию, мне кажется, я понимаю, почему.новая строка над предыдущей строкой.Альфа обводки установлена ​​на 1%, и когда вы рисуете, более старые области обводки начинают темнеть по мере наращивания слоев.

Я предполагаю, что я делаю что-то не так.Нужно ли очищать холст перед его рисованием в каждой новой точке?

Answer 1

HTML5 canvas не не приходит с методом endPath, но вместо этого вы можете снова вызвать context.beginPath(), чтобы закрыть текущий путь и начать новый.

Это в отличие от вызова context.closePath(), который фактически нарисует линию к началу текущего пути, но не end it.Если вы начнете рисовать снова, перо просто продолжит рисовать с той же точки, которая закрыла путь.См. Этот превосходный связанный ответ SO для более подробной информации и объяснений.

Answer 2

Поскольку вы никогда не вызываете ctx.closePath();, он будет каждый раз перерисовывать весь путь с начала.

Итак, вы действительно хотите что-то похожее на это:

http://jsfiddle.net/dGdxS/7/