HTML canvas clip() Metoda
Przykład
Wycinek prostokątnego obszaru o wymiarach 200*120 pikseli z płótna. Następnie narysuj czerwony prostokąt. Widoczna jest tylko część czerwonego prostokąta, która znajduje się wewnątrz przyciętego obszaru:
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);
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| clip() | Yes | 9.0 | Yes | Yes | Yes |
Definicja i użycie
Metoda clip() przycina region o dowolnym kształcie i rozmiarze z oryginalnego kanwy.
Wskazówka: po przycięciu regionu wszystkie przyszłe rysunki będą ograniczone do przyciętego regionu (brak dostępu do innych regionów na kanwie). Możesz jednak zapisać bieżący obszar kanwy za pomocą metody save() przed użyciem metody clip() i przywrócić go (za pomocą metody restore()) w dowolnym momencie w przyszłości.
| Składnia JavaScript: | kontekst .clip(); |
|---|
❮ Odniesienie do płótna HTML