HTML5 - Desenho na tela

A chave para ter estruturas fortes são os alicerces, para isso devemos ter alicerces fortes e bem definidos, portanto, para podermos usar o elemento em sua capacidade máxima. Tela de pintura Primeiro devemos conhecer os aspectos básicos em profundidade e por isso vamos começar a desenhar formas básicas, com isso aprenderemos como funcionam os diferentes métodos de desenho e então poderemos fazer composições mais complexas.
Desenhe um retângulo
O retângulo é uma figura muito simples que consiste em 4 lados, vamos ver os métodos que temos disponíveis para poder desenhá-lo no Canvas:

• clearRect (x, y, w, h): Limpa um retângulo ou parte de um retângulo especificado anteriormente.
• fillRect (x, y, w, h): Usado para desenhar um retângulo preenchido.
• strokeRect (x, y, w, h): Usado para desenhar um retângulo sem preenchimento.

Como teremos notado, todos os métodos anteriores usam 4 argumentos, esses argumentos correspondem ao seguinte:

• x e são os limites da borda superior esquerda do retângulo.
• o que correspondem a largura e altura respectivamente.

Vejamos um exemplo simples para que possamos colocar esses elementos em prática:

 Exemplo Seu navegador não suporta o elemento tela de pintura 

Neste exemplo, vemos que definimos algumas variáveis, onde dizemos o Deslocamento ou limite onde os retângulos começarão, o tamanho e então uma contagem var que servirá como um contador para fazer as repetições, então vemos na próxima seção sabemos que faremos retângulos dinamicamente, vamos ver como eles são desenhados em nosso navegador:

Fizemos duas linhas de 5 retângulos cada, se olharmos para o código que chamamos de métodos fillRect () primeiro para retângulos preenchidos e depois para strokeRect para os não recheados.
Usando o método clearRect ()
E se agora quisermos limpar uma parte dos retângulos preenchidos? Para isso temos o método clearRect (), no código a seguir veremos como funciona:

 Exemplo Seu navegador não suporta o elemento tela de pintura 

Para cada repetição, aplicamos uma chamada ao método clearRect () e ao fazer o algoritmo, o fizemos percorrer todo o centro dos retângulos preenchidos, vamos ver na imagem a seguir como fica em nosso navegador:

Aqui podemos ver como limpamos uma área que havíamos desenhado anteriormente.
Com isso terminamos este tutorial onde pudemos ver um pouco mais a fundo alguns métodos que podemos usar para desenhar em nosso elemento Tela de pintura.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo