Como limpar a tela em javascript

O elemento Canvas é um contêiner para desenhar representações gráficas no navegador. É criado utilizando o marcação. Além disso, é útil limpar todos os elementos da tela para reutilizá -lo. JavaScript é uma linguagem de programação rica em recurso que fornece extensas funcionalidades para abordar um objetivo específico. Neste guia, demonstraremos o método para limpar a tela usando JavaScript.

Esta postagem serve os seguintes resultados:

• Como usar o método clearRect () para limpar a tela em javascript?
• Limpar parte específica da tela em JavaScript
• Limpar parte completa da tela em JavaScript

Como usar o método clearRect () para limpar a tela em javascript?

Em JavaScript, o ClearRect () O método é usado para limpar a parte inteira ou específica da tela. Juntamente com esse método, você precisa recuperar o elemento de tela por meio de sua classe ou ID. Primeiro, vamos dar uma olhada na sintaxe do método clearrect ():

Sintaxe

ClearRect (x, y, largura, altura);

Os parâmetros do ClearRect () o método são os seguintes:

• x: Especifica a coordenada x do canto superior esquerdo do retângulo.
• y: especifica a coordenada y do canto superior esquerdo do retângulo.
• largura: representa a largura do retângulo para limpar (pixels).
• altura: representa a altura do retângulo para limpar (pixels).

Exemplo 1: Limpar a parte específica da tela em JavaScript

Um exemplo é considerado empregando o ClearRect () Método para remover elementos específicos na janela do navegador. O código a seguir é separado e explicado como Html e JavaScript peças.

Código HTML

Exemplo para uma porção específica Clear Canvas

A explicação do código é a seguinte:

• A tela elemento é criado com “Id = pode” tendo largura = ”500" e altura = ”350".
• Um arquivo JavaScript é anexado ao passar o nome do arquivo "teste.js " para o src atributo.

Código JavaScript

var c = documento.getElementById ("Can");
var ctx = c.getContext ("2D");
ctx.FillStyle = "Black";
ctx.Fillrect (0, 0, 500, 350);
ctx.ClearRect (250, 100, 100, 100);

Neste código:

• Em primeiro lugar, o getElementById () Método extrai o elemento de tela.
• Depois disso, o getContext () O método é utilizado para extrair o contexto de desenho para exibir em tela.
• Além disso, o Fillreact () Método desenha um retângulo preenchido passando largura e altura argumentos.
• No fim, ClearReact () Remove os pixels no retângulo especificado.

Saída

A saída mostra que uma parte específica que está presente no centro da tela é limpa na janela do navegador.

Exemplo 2: Limpar a tela completa em JavaScript

Um método é considerado para limpar todos os elementos da tela pressionando o botão em JavaScript. Inicialmente, uma representação gráfica é colocada na tela. Depois disso, o ClearRect () O método é empregado para limpar a parte completa da tela.

Considerando o ClearRect () Método, o pedaço de código é dividido em arquivos HTML e JavaScript.

Código HTML

Pressione o botão para limpar o retângulo de tela

Neste código:

• Um elemento de tela é criado atribuindo "largura" de “300” e "altura" de "180" dimensões.
• Depois disso, um botão é anexado cujo valor é “Botão transparente”.
• No final, o arquivo de código JavaScript "teste.js " está ligado ao arquivo html dentro Tag.

Código JavaScript

Var Canvas = documento.getElementById ('mycan');
Var Context = Canvas.getContext ('2d');
contexto.BeginPath ();
contexto.Rect (18, 50, 200, 100);
contexto.FillStyle = "Black";
contexto.preencher();
contexto.linewidth = "20";
contexto.AVC();
documento.getElementById ('claro').addEventListener ('click', function ()
contexto.ClearRect (0, 0, tela.largura, tela.altura);
, false);

A explicação do código está escrita aqui:

• O getElementById ('mycan') é utilizado para extrair o elemento de tela passando um argumento.
• Depois disso, o "2d" é passado para desenhar uma imagem em uma superfície bidimensional usando o getContext () método.
• Além disso, o contexto.reagir() cria um retângulo especificando o alturas e larguras.
• O Filtyle A propriedade é utilizada para especificar a cor.
• Depois disso, o preencher() o método é empregado para preencher a cor em um retângulo.
• No final, o contexto.ClearReact () O método é usado para limpar a tela, passando a largura e a altura.

Saída

A saída retorna uma tela de cor preta que é limpa pressionando o “Botão transparente” na janela.

Conclusão

Em javascript, ClearRect () Fornece um recurso para limpar os elementos da tela especificando a altura e a largura. Este post explicou o trabalho e o uso do método ClearRect () para limpar a tela em JavaScript. Para uma melhor compreensão, dois exemplos são considerados para remover as partes específicas e limpas de todas as partes da tela. O método é benéfico para redesenhar, plotar e animações na tela.