Entrar Ainda não tem acesso?
4
respostas

beginPath

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A vida não é só feita de retângulos!

por Pablo Leonardo Silva Pereira
| 23k xp | 23 posts

O que mais me confundiu foi que ao tirar o primeiro beginPath o programa não viu o meu triângulo e a figura anterior a ele como uma única figura. E imagino que isso deveria acontecer levando em conta a explicação dada no seguinte fórum : https://cursos.alura.com.br/forum/topico-uso-do-beginpath-24443

<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle="green";
c.fillRect(0,0,200,400);

c.fillStyle="red";
c.fillRect(400,0,200,400);

c.fillStyle="gray";
c.beginPath();
c.moveTo(300,200);
c.lineTo(200,400);
c.lineTo(400,400);
c.fill();

// retire aqui a função beginPath e vera a diferença!!!!!
c.fillStyle="blue";
c.beginPath(); // <-------
c.arc(300,100,50,0,2*3.14);
c.fill();


</script>
4 respostas
por Matheus Santos Gomes
| 267.9k xp | 294 posts

É verdade Pablo, sem a função .beginPath() ele continua a forma anterior ao invés de começar uma nova forma, por isso fica tão diferente.

Excelente observação da sua parte!

por Pablo Leonardo Silva Pereira
| 23k xp | 23 posts

Então... mas se eu tirar o beginPath do triângulo, não acontece isso da forms anterior ser repetida(no caso, um retângulo).

por Pablo Leonardo Silva Pereira
| 23k xp | 23 posts

Mais ainda: neste caso eu consegui desenhar as mesmas formas sem a necessidade desse beginPath. Ficou kais confuso ainda

<meta charset =  'UTF-8'>
<h1> Testando o beginpath </h1>

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

<script>
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle="green";
    c.fillRect(0,0,200,400);

    c.fillStyle="red";
    c.fillRect(400,0,200,400);





    // retire aqui a função beginPath e vera a diferença!!!!!
    c.fillStyle="blue";
    c.arc(300,100,50,0,2*3.14);
    c.fill();



    c.fillStyle="gray";
    c.moveTo(300,200);
    c.lineTo(200,400);
    c.lineTo(400,400);
    c.fill();

</script>
por Matheus Santos Gomes
| 267.9k xp | 294 posts

É verdade!! Boa observação Pablo!!