clip()¶

Метод clip() обрезает область любой формы и размера, находящуюся вне указанного контура.

Примечание: После обрезки области все последующее рисование будет ограничено обрезанной областью (к другим областям холста доступа не будет). Тем не менее, перед использованием метода clip() можно сохранить текущую область холста при помощи метода save(), а затем в любое время восстановить ее при помощи метода restore().

Синтаксис¶

void ctx.clip([fillRule]);
void ctx.clip(path [, fillRule]);

Параметры¶

fillRule

Выбор алгоритма заливки фигуры

Возможные значения:

nonzero: Правило ненулевого индекса, значение по умолчанию

evenodd: Четно-нечетное правило

path

Path2D путь для заливки.

Спецификация¶

HTML Living Standard

Пример¶

Обрезаем прямоугольную область 200x120 пикселей. Затем рисуем красный прямоугольник. Видна будет только та часть этого прямоугольника, которая находится внутри обрезанной области:

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')

// Обрежем прямоугольную область
ctx.rect(50, 20, 200, 120)
ctx.stroke()
ctx.clip()

// После использования clip()
// нарисуем красный прямоугольник
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 150, 100)

Ссылки¶

Метод clip() ^{MDN (рус.)}