pincel.fillStyle = ("black"); pincel.beginPath (); pincel.moveTo(300, 200); pincel.lineTo(200, 400); pincel.lineTo(400, 400); pincel.fill ()
Fiz esse triângulo, mas no lugar do moveTo eu coloquei lineTo e deu na mesma. Qual a diferença?
pincel.fillStyle = ("black"); pincel.beginPath (); pincel.moveTo(300, 200); pincel.lineTo(200, 400); pincel.lineTo(400, 400); pincel.fill ()
Fiz esse triângulo, mas no lugar do moveTo eu coloquei lineTo e deu na mesma. Qual a diferença?
Oi Jefferson, tudo bem?
Obrigado pela paciência em aguardar um retorno!
O código que você compartilhou é exatamente a sequência de comandos que precisam ser seguidos para conseguir desenhar um triângulo.
pincel.fillStyle = (“black”);
pincel.beginPath();
pincel.moveTo(300, 200);
pincel.lineTo(200, 400);
pincel.lineTo(400, 400);
pincel.fill();
Sabendo a sequência de códigos vamos entender cada linha e a importância de cada parte.
Inicialmente usa-se a propriedade fillStyle para definir a cor de preenchimento da figura. Na sequência é necessário informar que um caminho será traçado, e isso é feito pela propriedade beginPath(). Para indicar a posição inicial do pincel usa-se a propriedade moveTo, em seguida começa a movimentação do pincel para criar linhas por meio da propriedade lineTo(). Ao delimitar o espaço que será preenchido finaliza-se os comandos com a propriedade fill() que realizará o preenchimento de todo o desenho, tendo as linhas como demarcações.
Ao trocar a propriedade moveTo() pela lineTo(), define-se que o ponto inicial nas coordenadas cartesianas são o par (0, 0), ou seja, canto superior esquerdo da tela. Não há problemas com o desenho, pois o preenchimento acontece no interior das linhas, ou seja, nas delimitações que formam o triângulo.
Espero ter ajudado com sua dúvida. Caso tenha outras, estarei à disposição para te auxiliar!
Grande abraço e bons estudos!