CanvasRenderingContext2D: метод clip()

Метод CanvasRenderingContext2D.clip() API холста 2D преобразует текущую или заданную траекторию в текущую область обрезки. Предыдущая область обрезки (если она есть) пересекается с текущей или заданной траекторией для создания новой области обрезки.

На изображении ниже красная линия обозначает область обрезки в форме звезды. Только те части шахматного узора, которые находятся внутри области обрезки, будут нарисованы.

fillRule

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

nonzero

Правило нечётного числа пересечений. Правило по умолчанию.

evenodd

Правило чётного/нечётного числа пересечений.

path

Объект Path2D траектории, используемый в качестве области обрезки.

None (undefined).

В этом примере используется метод clip() для создания области обрезки по форме дуги окружности. Затем рисуются два прямоугольника; только части внутри области обрезки будут отрисованы.

HTML

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

JavaScript

Область обрезки — полная окружность с центром в (100, 75) и радиусом 50.

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

// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);

Результат

В этом примере два прямоугольника сохраняются в объекте Path2D, который затем становится текущей областью обрезки с помощью метода clip(). Правило "evenodd" создаёт отверстие там, где прямоугольники обрезки пересекаются; по умолчанию (с правилом "nonzero"), такого отверстия не будет.

HTML

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

JavaScript

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

// Create clipping path
let region = new Path2D();
region.rect(80, 10, 20, 130);
region.rect(40, 50, 100, 50);
ctx.clip(region, "evenodd");

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

Результат

В этом примере используются два пути, прямоугольник и квадрат, для создания сложной области обрезки. Метод clip() вызывается дважды: сначала для установки текущей области обрезки на круг с помощью объекта Path2D, а затем снова для пересечения области обрезки круга с квадратом. Окончательная область обрезки представляет собой фигуру, представляющую пересечение круга и квадрата.

HTML

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

JavaScript

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

// Create two clipping paths
let circlePath = new Path2D();
circlePath.arc(150, 75, 75, 0, 2 * Math.PI);
let squarePath = new Path2D();
squarePath.rect(85, 10, 130, 130);

// Set the clip to the circle
ctx.clip(circlePath);
// Set the clip to be the intersection of the circle and the square
ctx.clip(squarePath);

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

Результат

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