Почему HTML Canvas с закругленными углами lineCap не работает для последнего сегмента?

Question

С HTML Canvas, если вы рисуете пунктирную линию, как это:

ctx.lineWidth   = 40;
ctx.lineCap     = 'round';
ctx.strokeStyle = 'red';

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(150,200);
ctx.moveTo(200,300);
ctx.lineTo(250,400);
ctx.moveTo(300,500);
ctx.lineTo(350,600);
ctx.closePath();
ctx.stroke();

, тогда результат будет следующим:

Пунктирная линия с первыми двумя штрихами с использованием закругленных заглавных букви последний штрих с использованием торцевых заглушек http://phrogz.net/tmp/canvas_broken_rounded_stroke.png

Как вы можете видеть на этой тестовой странице , добавление «лишнего» вызова moveTo после последнего lineTo исправляет последний отрезок строки для использования округленногоcaps.

Я был готов сообщить об этом как об ошибке, но потом обнаружил, что поведение Safari v5, Chrome v8 и FireFox v3.6 и v4.0b идентично.Это заставляет меня поверить, что оно является преднамеренным.

Где в стандарте указано это поведение и (если вы можете его различить), почему оно было определено как таковое?

Answer 1

Вот соответствующие определения из спецификации холста (раздел 9, пути) :

Метод moveTo(x, y) должен создать новый подпуть с указанной точкой в ​​качестве своейпервая (и единственная) точка.

Метод lineTo(x, y) ... должен соединить последнюю точку подпути с заданной точкой (x, y) с помощью прямой линии, а затем должен добавить данную точку(x, y) к подпути.

Метод closePath() ... должен пометить последний подпуть как закрытый ... это эквивалентно добавлению прямой линии, соединяющей последнюю точку с первой точкойтаким образом "закрывая" форму ...

Каждый вызов moveTo создает новый подпуть, тем самым заканчивая предыдущий подпуть.В вашем случае, первые два сегмента заканчиваются таким образом.Для последнего сегмента вызов closePath «закрывает» сегмент, рисуя другой сегмент в обратном направлении, поэтому вы видите результат - не один сегмент, а два перекрывающихся сегмента.Добавление еще одного moveTo завершает этот сегмент так же, как и остальные, поэтому вы видите закругленную линию крышки, как и ожидалось.