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 July 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
<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
Specification |
---|
HTML Standard # dom-context-2d-clip-dev |
Compatibilidade com navegadores
BCD tables only load in the browser
Ver também
- A interface como defini-la,
CanvasRenderingContext2D
.