Olá Bianca, tudo bem com você ?
Vou explicar porque mudou a forma de escrever esse tipo de código e seu uso:
- No mundo da programação existem ocasiões em que o programador irá construir códigos pequenos como é o caso nosso.
- Contudo existem situações onde será necessária a reutilização de varias partes de códigos e varias funções, parâmetros e propriedades que serão reutilizadas inúmeras vezes, e com o intuito de não ser necessária a elaboração daquela mesma situação varias vezes foram elaboradas formas de reutilizar a mesma junção de propriedades outras vezes utilizando um nome especifico dado pelo próprio programador.
- No caso em questão foi criado toda uma função para fazer o seguinte:
- Nessa parte:
pincel.fillStyle = cor
pincel.beginPath();
pincel.moveTo(xa, ya);
pincel.lineTo(xa, yc);
pincel.lineTo(xc, yc);
pincel.fill();
Foi estabelecido a cor e foi criado um caminho e um preenchimento e mantido as localizações de x e y como subjetivas.
Nessa outra parte:
pincel.fillStyle = 'white'
pincel.beginPath();
pincel.moveTo((6 * xa + xc) / 7, (9 * ya + 5 * yc) / 14);
pincel.lineTo((6 * xa + xc) / 7, (ya + 6 * yc) / 7);
pincel.lineTo((5 * xa + 9 * xc) / 14, (ya + 6 * yc) / 7);
pincel.fill();
Foi feito a mesma coisa, contudo dessa vez foi adicionado alguns cálculos que tem o objetivo de utilizar o x e y que estão subjetivos na parte anterior para montar uma figura que irá se localizar no centro da anterior e que se localizará no centro não importa o que aconteça.
E por fim a função deve ser chamada e os valores devem ser atribuídos, como acontece aqui:
desenhaEsquadro(50, 50, 400, 400, 'black');
E como você poderá perceber caso uso outros valores, você vai ver que esses mesmos geométricos porém em locais diferentes e com a cor que você escolher.
No geral era isso, caso tenha dúvidas recorra ao fórum!
Um grande abraço e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.
