Índice
Com os diferentes métodos de desenho vistos no tela de pintura É possível definir áreas dentro deles para desenhar, embora seja um pouco mais complexo é totalmente viável, mas também temos a possibilidade de obter o mesmo resultado usando o método clip ().Outro aspecto que também pode ser incorporado ao tela é o desenho de texto, talvez pensemos que usando CSS e outros elementos podemos desenhar um texto que é o mesmo ou mais bonito, porém, estando no tela de pintura nos permite aplicar animações nativas em HTML5.
Método de clipe
Como mencionamos no início, este método simplifica o caminho para como podemos criar uma seção dentro de uma tela, para poder introduzir outros elementos desenhados, como um novo desenho ou preenchê-lo com uma cor específica.
Para usar esta ferramenta devemos chamar o método clipe (), o que esse método faz é criar uma região de recorte ou uma nova seção, vamos ver no código a seguir como funciona:
Exemplo Seu navegador não suporta o elemento tela de pintura Neste código, primeiro desenhamos um grande retângulo em amarelo e, em seguida, criamos uma nova região dentro dele usando o método clip () e dentro desta região geramos um novo retângulo vermelho.
Vamos ver como fica em nosso navegador:
Também podemos desenhar texto dentro de uma tela, para isso temos os seguintes métodos:
fillText (, x, y, largura): Desenha e preenche o texto especificado no primeiro parâmetro na posição (x, y). Além disso, seu argumento largura é opcional, mas quando declarado, define um limite para a largura do texto.
strokeText (, x, y, largura): Desenha e deixa o texto sem preenchimento na posição (x, y). Como o método anterior em seu argumento opcional, ele limita a largura do texto.
Vejamos o seguinte exemplo de como usar esses métodos para desenhar texto em nossa tela:
Exemplo Seu navegador não suporta o elemento tela de pintura Neste código usamos os dois métodos para desenhar o mesmo texto, ambos na mesma posição, mas com uma cor diferente com a qual alcançamos um efeito de um quadro externo de uma cor e um preenchimento de outra cor, com isso podemos estabelecer um mais diferença marcada entre fillText Y strokeText.
Finalmente e para finalizar este tutorial vamos ver como fica no navegador.
