Índice
Ao usar o item tela de pintura para desenhar não nos limitamos a desenhar figuras retangulares, também podemos desenhar usando coordenadas e as chamadas caminhos que são caminhos pelos quais iremos indicar o elemento tela de pintura onde e como mostrar nosso desenho.As possibilidades que isso nos dá são impressionantes, pois com os algoritmos necessários podemos fazer composições ilimitadas, desenhar qualquer tipo de figura em HTML5 e com ela até atingir em conjunto com outros elementos resultados nunca imaginados nas especificações anteriores da linguagem.
Usando o caminho
Como mencionamos o caminho é o que nos permitirá indicar ao canvas as coordenadas pelas quais o desenho deve ser feito, com estas coordenadas o canvas poderá saber onde desenhar as linhas correspondentes e no final com o correcto acúmulo de linhas podemos conseguir qualquer tipo de figura.
Antes de passar para os exemplos correspondentes, devemos saber quais métodos estão disponíveis para o elemento canvas e o caminho, vamos ver a seguinte lista:
- beginPath (): Este método nos permite iniciar um novo caminho.
- closePath (): Este método tenta fechar o caminho atual desenhando uma linha do final da última linha até as coordenadas iniciais.
- encher (): Preencha os formulários descritos nos subcaminhos.
- isPointInPath (x, y): Retorna verdadeiro se o ponto especificado estiver contido na forma desenhada pelo caminho atual.
- lineTo (x, y): Desenhe um subcaminho nas coordenadas especificadas.
- moveTo (x, y): Ele nos permite mover para as coordenadas especificadas sem ter que desenhar um subcaminho.
- rect (x, y, w, h): Desenhe um retângulo cujas coordenadas no canto superior esquerdo correspondem a (x, y), sua largura corresponde a w e sua altura corresponde a h.
- derrame (): Desenhe as linhas externas das formas desenhadas pelo subcaminho.
• Chamamos o método beginPath.
• Nós nos movemos para a posição inicial usando o método mover para.
• Desenhamos os subcaminhos com os métodos lineToetc.
• Opcionalmente, podemos chamar o método closePath.
• Finalmente chamamos os métodos encher ou atiçar.
Já temos o pedido recomendado para começar a desenhar, agora vemos o código correspondente em HTML5.
Exemplo Seu navegador não suporta o elemento tela de pintura Como podemos ver, duas chamadas são feitas para beginPath(), com isso podemos iniciar as áreas de desenho na tela então com moveTo () estabelecemos as posições iniciais e o resto é desenhar.
Vamos ver como fica nosso desenho no navegador:
