clearRect не очищает холст при рисовании вертикальных линий

Question

Я столкнулся со странным крайним случаем, когда что-то строил с помощью canvas на работе.clearRect не очищает холст при рисовании вертикальных линий, идущих сверху вниз.При рендеринге других вещей clearRect работает нормально.

Я не уверен, что пропускаю что-то очевидное, является ли это преднамеренным поведением или ошибкой браузера (маловероятно, поскольку в chrome, safari, firefox поведение идентичнои опера на маке).Если это намеренное поведение, знает ли кто-нибудь обоснование этого и / или, возможно, может указать на какую-то документацию?

Я сделал небольшой тестовый пример, который четко демонстрирует поведение, только комбинация clearRect / вертикальные линии не даеточистить холст: http://jsfiddle.net/kZj6F/

Спасибо!

Answer 1

Ваша проблема с отсутствующим beginPath, в результате которого последующие строки добавляются к тому же пути, который был stroke при рисовании всех линий.

Если вы переключитесь на точки и вернетесь к линиям с параметром clearRect, вы увидите, что последний arc также добавлен к нарисованному пути. Просто добавьте вызов ctx.beginPath(); до ctx.moveTo(randomX + 0.5, 0); ctx.lineTo(randomX + 0.5, canvas.height); и проблема решена.

Вы можете проверить http://jsfiddle.net/kZj6F/1/, чтобы увидеть, как оно работает.

Но и с другими фигурами, если они были добавлены к пути, путь не был очищен.