Índice
Desenhar curvas em uma tela pode ser simples ou complexo, tudo depende do que você deseja alcançar, você pode fazer alguns efeitos interessantes, que poderíamos usar para construir algumas funcionalidades em nossa página, que se destacam do resto das páginas feitas em HTML5.Uma das coisas que podemos fazer é dar um tratamento avançado à criação de linhas curvas, com este tipo de ferramentas estaremos mais perto de não ter limitações ao pensarmos no que a nossa página pode fazer.
Desenhe uma curva ao mover o mouse
Este caso é bastante interessante, pois o que fazemos é desenhar uma curva ao mover o mouse, além disso, se pressionarmos qualquer tecla em nosso teclado, alguns pontos da curva mudam.
Por exemplo, se pressionarmos a tecla ctrl, o primeiro ponto que representa o fim do subcaminho, se pressionarmos a tecla shift, o segundo ponto se moverá, que são os dois primeiros argumentos do método arcTo () e, finalmente, se não pressionarmos nenhuma tecla, o terceiro ponto representado pelos dois últimos argumentos do método se moverá.
Vejamos abaixo o código com o qual alcançamos esses efeitos:
Exemplo Seu navegador não suporta o elemento tela de pintura Como podemos ver, primeiro no código definimos o tratador da recepção de eventos das teclas que pressionamos, nele estabelecemos os valores que devem ser tomados.
Vejamos a seguir uma captura de tela de como isso poderia resultar em nosso navegador, é importante mencionar que sendo dinâmico os resultados podem variar ao reproduzir este exemplo:
Anteriormente, tínhamos usado apenas o método arcTo ()Agora veremos como funciona o método arc (), seu manuseio é mais fácil, já que especificamos um ponto na tela através dos dois primeiros argumentos e depois o raio e o ângulo da curva.
Vejamos o seguinte exemplo de como desenhar três tipos de curvas com este método:
Exemplo Seu navegador não suporta o elemento tela de pintura Agora vamos ver como fica em nosso navegador:
