5
respostas

Meu código (Utilizando um losango)

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

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "green";
    pincel.fillRect(0, 0, 600, 400);

     //losango

    pincel.fillStyle = "yellow";
    pincel.beginPath();         
    pincel.moveTo(300, 50);     
    pincel.lineTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

     //círculo

    pincel.fillStyle = "darkblue";
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2 * 3.14);    
    pincel.fill();  

</script>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas

Quebrei a cabeça para fazer o losango e não consegui, parabéns.

Também fiz o losango direto, já que o path pode ter quantos pontos desejarmos!

// LOSANGO AMARELO
pincel.fillStyle = 'yellow';
// começar um traçado
pincel.beginPath();
// moveTo vai para o primeiro ponto sem desenhar nada
pincel.moveTo(30,200);
// lineTo "deixa rastros"
pincel.lineTo(300,30);
pincel.lineTo(570,200);
pincel.lineTo(300,370);
pincel.fill();

Show. Também desenhei o losango

    // losango
    pincel.fillStyle = 'yellow'
    pincel.beginPath() // começa no sentido horário
    pincel.moveTo(50, 200) // ponto A
    pincel.lineTo(300, 50) // ponto B
    pincel.lineTo(550, 200) // ponto C
    pincel.lineTo(300, 350) // ponto D
    pincel.fill()

Para o círculo, ao invés de 3.14, pode usar o Math.PI também.

    pincel.fillStyle = 'darkblue'
    pincel.beginPath()
    pincel.arc(300, 200, 100, 0, 2*Math.PI)
    pincel.fill()

Confesso que fiz sem querer esse losango

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    //ret
       pincel.fillStyle = 'green';
       pincel.fillRect(0, 0, 600, 400);
    //los
    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(30, 200);
    pincel.lineTo(300,30);
    pincel.lineTo(570,200);
    pincel.lineTo(300,370);
    pincel.fill()
    //circ
    pincel.fillStyle="darkblue";
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2*3.14);
    pincel.fill();

</script>

Parabéns, Kleber !!! Ficou muito bom !