HTML canvas clip()Метод
Пример
Вырежьте из canvas прямоугольную область размером 200*120 пикселей. Затем нарисуйте красный прямоугольник. Видна только часть красного прямоугольника внутри обрезанной области:
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);
</script>
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);
</script>
Попробуйте сами »
Поддержка браузеров
Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод clip().
Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
Определение и использование
Метод clip() вырезает произвольную форму и размер из исходного холста.
Совет:После того как область обрезана, все последующее рисование будет ограничено обрезанной областью (к другим областям на холсте нельзя получить доступ). Вы также можете сохранить текущую область холста с помощью метода save() перед использованием clip(), а позже в любой момент восстановить её (с помощью метода restore()).
| Синтаксис JavaScript: | context.clip(); |
|---|
Справочник по HTML canvas Другие расширения