CanvasRenderingContext2D: метод stroke()

Метод CanvasRenderingContext2D.stroke() API Canvas 2D выполняет обводку (контур) текущей или заданной траектории текущим стилем обводки.

Обводка выравнивается по центру траектории; другими словами, половина обводки рисуется по внутренней стороне, а половина — по внешней.

Обводка рисуется с использованием правила о нечётном числе пересечений, что означает, что точки пересечения траектории всё ещё будут заполнены.

path

Траектория Path2D для обводки.

None (undefined).

В этом примере используется метод rect() для создания прямоугольника, а затем он рисуется на холсте с помощью stroke().

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.stroke();

Результат

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

HTML

<canvas id="canvas"></canvas>

JavaScript

Этот код обводит первую траекторию три раза, вторую — два раза, а третью — только один раз.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// First sub-path
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// Second sub-path
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// Third sub-path
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();

Результат

Если вы хотите выполнить как обводку, так и заполнение траектории, порядок выполнения этих действий определит результат. В этом примере квадрат слева нарисован с обводкой поверх заливки. Квадрат справа нарисован с заливкой поверх обводки.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 16;
ctx.strokeStyle = "red";

// Stroke on top of fill
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// Fill on top of stroke
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D