Metoda HTML canvas clip()
Definicja i użycie
clip() Metoda wytnie dowolny kształt i rozmiar z oryginalnego płótna.
Wskazówka:Gdy skopiujesz pewien obszar, wszystkie kolejne rysunki będą ograniczone do tego obszaru (nie można uzyskać dostępu do innych obszarów płótna). Możesz również za pomocą metody save() zapisać bieżący obszar płótna przed użyciem metody clip(), a następnie w dowolnym momencie go przywrócić (poprzez metodę restore()).
Przykład
Wytnij obszar prostokątny 200*120 pikseli z płótna. Następnie, narysuj prostokąt zielony. Tylko część zielonego prostokąta w wytnionym obszarze jest widoczna:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Wycięcie obszaru prostokąta
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Rysowanie zielonego prostokąta po clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Gramatyka
context.clip();
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.
