Esta tradução está incompleta. Ajude atraduzir este artigo.
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
fillRule
- O algoritmo pelo qual determina se um ponto esta dentro de um caminho ou fora de um caminho.
Valores Possíveis:"nonzero
": A regra contorno diferente de zero, que é a regra padrão."evenodd"
: A regra do contorno par ou ímpar.
path
- Um
Path2D
caminho para recorte.
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
<canvas id="canvas"></canvas>
JavaScript
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
Especificação | Estado | Comentário |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.clip' in that specification. |
Living Standard |
Compatibilidade com os navegadores
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suporte Básico | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Parametro do Caminho | ? | 31 (31) | Não suportado | ? | Não suportado |
Característica | Android | Chrome para Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suporte Básico | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Parametro do Caminho | ? | ? | 31.0 (31) | ? | ? | ? |
Ver também
- A interface como defini-la,
CanvasRenderingContext2D
.