Exemplo
Clipe de uma região retangular de 200 * 120 pixels da tela. Em seguida, desenhe um retângulo vermelho. Apenas a parte do retângulo vermelho que está dentro da área cortada é visível:
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> Tente você mesmo " Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
Definição e Uso
Os clip() clipes método, uma região de qualquer forma e tamanho a partir do original da lona.
Tip: Uma vez que uma região é cortada, todos os futuros desenho será limitada à região cortada (no access to other regions on the canvas) . No entanto, pode salvar a região da lona atual usando o save() método antes de usar o clip() método, e restaurá-lo (with the restore() método) a qualquer momento no futuro.
| sintaxe JavaScript: | context . clip() ; |
|---|
<Object Canvas