Перейти к содержанию

clip()

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

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

Синтаксис

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

Параметры

fillRule
Выбор алгоритма заливки фигуры
Возможные значения:
  • nonzero: Правило ненулевого индекса, значение по умолчанию
  • evenodd: Четно-нечетное правило
path
Path2D путь для заливки.

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

Пример

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

Ваш браузер не поддерживает HTML5 тег canvas.

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)

Ссылки