CanvasRenderingContext2D.clip()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
O método CanvasRenderingContext2D.clip() da API do Canvas 2D transforma o caminho atualmente construido em um caminho atual de recorte.
Sintaxe
void ctx.clip(); void ctx.clip(fillRule); void ctx.clip(path, fillRule);
Parâmetros
Exemplos
Usando do método de corte
Isso é só um simples fragmento de código que usa o método de corte para criar uma região de recorte.
HTML
html
<canvas id="canvas"></canvas> JavaScript
js
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Cria uma região de recorte ctx.arc(100, 100, 75, 0, Math.PI * 2, false); ctx.clip(); ctx.fillRect(0, 0, 100, 100); Edite o código abaixo e veja suas mudanças atualizadas ao vivo no canvas:
Nota: Tenha consciência de que o clip() só funciona com formas adicionadas ao caminho; ele não funciona com uma forma primitiva, como retângulos criados com fillRect(). Nesse caso você teria que usar rect() para desenhar um caminho de forma retângular para ser recortado.
Especificações
| Specification |
|---|
| HTML # dom-context-2d-clip-dev |
Compatibilidade com navegadores
Ver também
- A interface como defini-la,
CanvasRenderingContext2D.