Metoda clip() powierzchni Canvas
Definicja i użycie
clip() Metoda wycina dowolny kształt i rozmiar z oryginalnej powierzchni.
Wskazówka:Gdy wycięty jest jakiś obszar, wszystkie późniejsze rysunki będą ograniczone do tego obszaru (nie można uzyskać dostępu do innych obszarów powierzchni). Możesz również za pomocą metody save() zapisać bieżący obszar powierzchni przed użyciem metody clip(), a następnie w dowolnym momencie go przywrócić (poprzez metodę restore()).
Przykład
Wytnij obszar 200x120 pikseli z powierzchni rysunku. Następnie, narysuj zielony prostokąt. Tylko część prostokąta wyciętego obszaru jest widoczna:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Wycina obszar prostokątny
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Po clip() rysuje zielony prostokąt
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>.
