[Projeto] Esquadro

Aí, a brincadeira começou...

Este o código ficou assim:

<title>esquadro2</title>

<canvas width="600" height="400"></canvas>

<script>

//    criar tela e pincel
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');

//    preenchimento do fundo 600 x 400 cinza
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

//    preenchimento do quadrado laranja
    pincel.fillStyle = 'orange';
    pincel.fillRect(120, 20, 360, 360);

    //    preenchimento do quadrado cinza
    pincel.fillStyle = 'grey';
    pincel.fillRect(225, 105, 155, 178);

//    pintar triângulo maior preto
    pincel.fillStyle = 'black';

//    desenhar 3 linhas
    pincel.beginPath();
    pincel.moveTo(125, 25);
    pincel.lineTo(125, 375);
    pincel.lineTo(475, 375);

//    preencher triângulo preto
    pincel.fill();

//    pintar triângulo menor laranja
    pincel.fillStyle = 'orange';

//    desenhar 3 linhas
    pincel.beginPath();
    pincel.moveTo(178, 150);
    pincel.lineTo(178, 325);
    pincel.lineTo(353, 325);

//    preencher triângulo laranja
    pincel.fill();

//    pintar triângulo cinza
    pincel.fillStyle = 'grey';

//    desenhar 3 linhas
    pincel.beginPath();
    pincel.moveTo(225, 197);
    pincel.lineTo(225, 283);
    pincel.lineTo(311, 283);

//    preencher triângulo cinza
    pincel.fill();

</script>

O interessante é que a diagonal do esquadro causa ilusão de ótica, parece que o retângulo cinza não está alinhado com o triângulo cinza, mas está, veja:

E o código com as linhas azuis ficou assim:

<title>esquadro incrementado</title>

<canvas width="600" height="400"></canvas>

<script>

//    criar tela e pincel
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');

//    preenchimento do fundo 600 x 400 cinza
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

//    preenchimento do quadrado laranja
    pincel.fillStyle = 'orange';
    pincel.fillRect(120, 20, 360, 360);

    //    preenchimento do quadrado cinza
    pincel.fillStyle = 'grey';
    pincel.fillRect(225, 105, 155, 178);

//    pintar triângulo maior preto
    pincel.fillStyle = 'black';

//    desenhar 3 linhas
    pincel.beginPath();
    pincel.moveTo(125, 25);
    pincel.lineTo(125, 375);
    pincel.lineTo(475, 375);

//    preencher triângulo preto
    pincel.fill();

//    pintar triângulo menor laranja
    pincel.fillStyle = 'orange';

//    desenhar 3 linhas
    pincel.beginPath();
    pincel.moveTo(178, 150);
    pincel.lineTo(178, 325);
    pincel.lineTo(353, 325);

//    preencher triângulo laranja
    pincel.fill();

//    pintar triângulo cinza
    pincel.fillStyle = 'grey';

//    desenhar 3 linhas
    pincel.beginPath();
    pincel.moveTo(225, 197);
    pincel.lineTo(225, 283);
    pincel.lineTo(311, 283);

//    preencher triângulo cinza
    pincel.fill();

//    linha vertical azul
    pincel.fillStyle = 'cyan';
    pincel.fillRect(224, 0, 1, 400);

//    linha horizontal azul
    pincel.fillStyle = 'cyan';
    pincel.fillRect(0, 283, 600, 1);

</script>

Olá Carlos, tudo ok por aí?

Novamente brilhando no fórum com seus incríveis projetos!

Eu gostaria de dizer o quão impressionado estou com sua evolução, eu estava analisando e observei uma evolução e um crescimento sem precedentes por parte sua!

Parabéns pelos projetos, consegui ver o quanto de dedicação e empenho você colocou em cada um desses projetos, eles foram todos muito bem programados, isso é um grande ponto para se orgulhar!

Novamente me impressionei ao ver o quão incrível é a sua percepção dos projetos e cursos da Alura, seu desenvolvimento veio junto com o seu afinco, empenho, dedicação e detalhismo em cima dos exemplos, jogos, projetos, desafios, etc, que foram colocados no curso.

Meus parabéns pela evolução e dedicação, continue assim, com certeza você vai alcançar coisas ainda mais incríveis!

Um, enorme abraço e bons estudos!

Fala, Renan!!

Belezinha?

Agradeço por seu apoio e de toda equipe da Alura, dessa maneira fica bem mais fácil aprender e evoluir. O suporte de alta qualidade que oferecem faz a diferença, obrigado.

E vamos em frente que este curso está muito bacana, mas a trilha é longa e tem ainda mais conteúdo interessante.

Abs e bom trabalho!!

Parabens Carlos, me ajudou a entender e a fazer outra maneiras de desenhos

Que bom, Aluno!!!!

A ideia é essa mesmo, colaborar pra gente ir mais adiante!!

Abs e bons estudos!!