Что такое путь к холсту, и каково использование ctx.closePath()?

Я работаю над игрой HTML5. Мне нужно нарисовать линии хвоста в холсте и проверить пересечения в игре, которая является игрой в стиле Трон.

Я фактически использую функцию drawLine() из JCanvas, но JCanvas не предоставил мне способ проверить пересечение линии, я выкопал в источнике и нашел использование объекта ctx, и в конце используемой функции я вернул объект, поэтому я могу использовать метод ctx.isPointInPath() для достижения того, что мне нужно, но не работает, возвращает false каждый раз...

Я действительно не понимаю, что такое путь - будет ctx.isPointInPath() возвращать true только для точек, которые установлены с помощью ctx.moveTo() после ctx.beginPath()? Или он вернет true для всех точек, которые находятся между 2 последовательными ctx.moveTo(), которые связаны с помощью ctx.lineTo()?

Что такое ctx.closePath()?

И в чем разница между:

{
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

и

{
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

Ответы

Ответ 1

Что такое путь?

Это серия команд пути (moveTo, lineTo, arcTo и т.д.), которые определяют границу векторной формы. Затем вы можете заполнить и/или погладить путь по желанию.

Что такое использование closePath()?

Демо: http://jsfiddle.net/YrQCG/5/

// Draw a red path using closePath() in the middle
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();

// Slide the next path over by 150 pixels    
ctx.translate(150,0);

// Draw a blue path using the exact same commands, but without closePath
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
//ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();

                      enter image description here

Использование closePath() заставляет точку пера вернуться к началу текущего подкаталога, нарисовать линию от текущей точки до этой начальной точки; следующая команда начинается с этой новой точки. Это полезно, если вы хотите нарисовать полностью очерченную фигуру без явного рисования последней строки.

Это эквивалентно вызову lineTo() с расположением первой точки вашего текущего подпути, за которым следует moveTo() к той же точке (для установки нового подпути).

  • Как показано выше, мы рисуем символ V, используя первый moveTo и следующие две команды lineTo. Когда мы назовем closePath по красному пути, он рисует горизонтальную полосу поперек и заставляет следующую строку начинать с левого верхнего угла.

  • Если мы не вызываем closePath в синем пути, следующая команда lineTo продолжается с последней нарисованной точки.

Обратите внимание, что closePath() не требуется большую часть времени, в отличие от beginPath(), который вы должны вызывать каждый раз, когда хотите начать рисовать новый путь. (Если вы этого не сделаете, все старые команды рисования пути являются частью следующего чертежа.)

Ответ 2

Это основное представление замкнутого пути:

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.lineTo(100,100);
ctx.lineTo(0,100);    
ctx.closePath(); // <--the image right side has this line
ctx.stroke();

Результат closePath() заключается в том, что начальная и конечная точки будут ограничены.

closed path