Resumo : neste tutorial, você aprenderá como usar o método clearRect() para apagar uma área da tela.
Introdução ao método Canvas clearRect()
Este clearRect()é um método do contexto de desenho 2D. O clearRect()método limpa uma área da tela tornando essa área transparente.
Na prática, você desenha formas e depois usa o clearRect()método para limpar áreas específicas e criar alguns efeitos interessantes.
O seguinte mostra a sintaxe do clearRect()método:
ctx.clearRect(x, y, width, height);Linguagem de código: CSS ( css )O clearRect()possui quatro parâmetros que definem uma área a ser apagada:
xé a coordenada do eixo x do ponto inicial do retângulo.yé a coordenada do eixo y do ponto inicial do retângulo.widthé a largura do retângulo. O sinal da largura determinará a direção do retângulo. Os valores positivos estão à direita, enquanto os valores negativos estão à esquerda do ponto inicial.heighté a altura do retângulo. Ele também aceita valores positivos e negativos. Os valores positivos diminuem enquanto os valores negativos aumentam em relação ao ponto inicial.
O exemplo do método canvas clearRect()
O seguinte mostra o index.htmlque contém um elemento canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Canvas clearRect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>JavaScript clearRect() Demo</h1>
<canvas id="canvas" height="400" width="500">
</canvas>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )No app.jsarquivo, defina o draw()que irá desenhar no canvas:
function draw() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// draw two squares
ctx.fillStyle = '#F9DC5C';
ctx.fillRect(50, 50, 150, 150);
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(100, 100, 150, 150);
// clear the intersection
ctx.clearRect(100, 100, 100, 100);
}
draw();Linguagem de código: JavaScript ( javascript )A imagem a seguir mostra a saída:
E aqui está a clearRect()demonstração .
Como funciona.
- Primeiro, selecione o elemento canvas usando o
document.querySelector()método. - A seguir, verifique se o navegador suporta a API canvas.
- Em seguida, obtenha o contexto de desenho 2D para desenhar na tela.
- Em seguida, desenhe dois quadrados que se cruzam usando o
fillRect()método. O segundo quadrado tem transparência alfa. - Finalmente, limpe a intersecção dos dois quadrados usando o
clearRect()método.
Resumo
- Use o
clearRect()método para definir os pixels em uma área retangular em uma tela para preto transparente.
Anterior
Próximo
