Manual de referência HTML

Lista completa de etiquetas HTML

Método clip() do HTML canvas

clip() é um método do Canvas 2O método clip() do D API define o caminho atualmente criado como o caminho de recorte atual.

Manual de referência do canvas HTML

Exemplo online

Capturar da tela200 * 120 pixel de área retangular. Em seguida, desenhar um retângulo vermelho. Apenas a parte vermelha do retângulo está na área cortada:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do método clip() no HTML canvas-Tutorial básico (oldtoolbag.com)</<title>
</<head>
<body>
<span>clip():</span>
<canvas id="myCanvas" width="300" altura="150" estilo="borda:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta <canvas> .
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//　Desenhar um retângulo
ctx.rect(50,20,200,120);
ctx.stroke();
//　Desenhar um retângulo vermelho
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
<span>clip():</span>
<canvas id="myCanvas2" largura="300" altura="150" estilo="borda:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta <canvas> .</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
//Recortar uma área retangular
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//Desenhar um retângulo após o recorte
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam clip() métodos.

Atenção:Internet Explorer 8 Versões anteriores ao e não suportam o elemento <canvas>.

Definição e uso

O método clip() recorta qualquer forma e tamanho de área do canvas original.

Dica:Após recortar uma área, todos os gráficos futuros estarão limitados à área recortada (não será possível acessar outras áreas do canvas). No entanto, você pode usar o método save() antes de usar o clip() para salvar a área atual do canvas e restaurá-la em qualquer momento (usando o método restore()).

Sintaxe JavaScript:	context.clip();

Manual de referência do canvas HTML

HTML: <template> etiqueta