Метод клипа холста HTML ()

❮ Справочник по холсту HTML

Пример

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

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

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.

Method
clip() Yes 9.0 Yes Yes Yes

Определение и использование

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

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

Синтаксис JavaScript: контекст .клип();

❮ Справочник по холсту HTML