1
resposta

Alguém poderia me dizer por que não da certo?

estou tentando conduzir pra onde quero escrever, usei .moveTo e .lineTo mas não funciona.

<meta charset="UTF-8">

<canvas width="1000" height="800"></canvas>
<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = "grey";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(parametro){

        var x = parametro.pageX - pantalla.offsetLeft;
        var y = parametro.pageY - pantalla.offsetTop;
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.moveTo(x, y);
        pincel.lineTo(x, y);
        pincel.fill();

        /*
        alert(x + ',' + y);
        */
    }
    pantalla.onclick = desenhaCirculo;

</script>
1 resposta

Boa tarde Rafael, tudo certo?

A sua iniciativa de tentar fazer algo diferente é maravilhosa! Colocar variações do que estamos vendo em prática é uma ótima forma de aprender. Eu vou dar algumas dicas aqui que podem te ajudar:

Você está criando uma linha na coordenada (x,y) que vai até o ponto (x,y), ou seja, não tem uma linha visível nesse processo já que ela começa e acaba no mesmo lugar.

Além disso, ao utilizar a função lineTo(), você vai deixar apenas uma linha, que é um objeto que não tem preenchimento por padrão. Sendo assim, você precisa utilizar a função stroke() ao invés de fill()

Aqui vai um código com algumas alterações que cria linhas que vão de (0,0) até (x,y) quando você clica. Sugiro retornar nessa atividade futuramente, após acumular mais algumas bagagens do curso e se sentir mais confortável para executar a sua visão:

<meta charset="UTF-8">

<canvas width="1000" height="800"></canvas>
<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = "grey";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(parametro){

        var x = parametro.pageX - pantalla.offsetLeft;
        var y = parametro.pageY - pantalla.offsetTop;
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.moveTo(0, 0); // Coordenada que você precisa alterar futuramente
        pincel.lineTo(x, y);
        pincel.stroke(); // Como é uma linha, ela só tem um contorno. Ou seja, não tem um preenchimento (fill)

        /*
        alert(x + ',' + y);
        */
    }
    pantalla.onclick = desenhaCirculo;

</script>

Espero ter ajudado e bons estudos!