Przykład
Zacisk prostokątnego obszaru 200 x 120 pikseli z obszaru roboczego. Następnie narysować czerwony prostokąt. Tylko część czerwonego prostokąta, który jest wewnątrz przycięty obszar jest widoczny:
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);
</script> Spróbuj sam " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
Że clip() Sposób zaciski obszar o dowolnym kształcie i wielkości od pierwotnego płótnie.
Tip: Gdy obszar jest obcięty, wszystkie przyszłe rysunek będzie ograniczona do ściętym regionu (no access to other regions on the canvas) . Można jednak zapisać bieżący obszar roboczy za pomocą save() metodę przed użyciem clip() metody i przywrócić go (with the restore() metody) w dowolnym momencie w przyszłości.
| Składnia JavaScript: | context . clip() ; |
|---|
<Płótno Przedmiot