Dúvida com o document.getElementById | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Cristiano Santos

| 151.1k xp | 23 posts

Tentei adicionar um id ao input e utilizar o document.getElementById. Com isso, o desenho sempre sai na cor preta, não importa a cor que eu escolha. Entendi a explicação do professor, mas gostaria de entender o pq de não funcionar desta forma. Segue o trecho do código que mencionei, com comentários:

<canvas width="600" height="400"></canvas>
<br>
Escolha uma cor <input type="color" id="color">

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var input = document.getElementById("color"); //criei a var input, depois de adicionar o id "color" no input do mundo HTML
    var cor = input.value; //var cor recebe valor da var input

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

    var desenha = false;

    function desenhaCirculo(evento) {

        if(desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cor; //pincel.fillStyle recebe a var cor, mas só desenha na cor preta
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + "," + y);
    }

Código completo, sem os comentários:

<canvas width="600" height="400"></canvas>
<br>
Escolha uma cor <input type="color" id="color">

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var input = document.getElementById("color");
    var cor = input.value;

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

    var desenha = false;

    function desenhaCirculo(evento) {

        if(desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + "," + y);
    }

    tela.onmousemove = desenhaCirculo;

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

</script>

2 respostas

por Estudante

| 389.9k xp | 241 posts

02/02/2022

Olá, Cristiano, acredito que esteja acontecendo isso porque a função getElementById pega o dado que estiver no input no momento em que for executada. Como a paleta de cores inserida no programa tem a cor preta como inicial, é essa informação que ela pega. Então, para atualizar o valor dessa função cada vez que for selecionada uma nova cor, me parece que devemos criar uma função com a instrução para que isso aconteça.

Outro detalhe, é que essa função não extrai diretamente os dados de um elemento, mas sim, transforma-o em um objeto, para que possa ser utilizado posteriormente. Para ter acesso diretamente ao dado (value), é necessário utilizar a propriedade "value" do campo onde foi digitado como, por exemplo:

var input = document.getElementById("color").value;

Bons estudos!

solução!

por Diógenes Bahia Bezerra

| 124.5k xp | 130 posts

02/02/2022

Tudo bom, Cristiano.

Da mesma forma que a variável "tela" busca no canvas usando a função .querySelector, será a mesma forma que você irá buscar o input da paleta de cores.

Testei a parte que você cria a variável "cor" para pegar o input.value, mas ele não funcionou, mesmo com as correções que fiz no que você escreveu.

Eu creio que isso ocorra, pq você cria uma variável para o input (uma variável para a entrada) e não para o valor que tem dentro dela. Se você quer saber o valor que tem dentro desse input/entrada você tem que pedir usando ".value".

Então, você coloca "paleta.value" no lugar onde você indica a cor do círculo.

Espero ter ajudado. Sucesso na sua jornada!!

Vou colocar apenas a parte do código onde estão as suas dúvidas e vou comentá-las:

<canvas width = "600" height = "400"> </canvas>
<br>
Escolha uma cor <input type="color">

<script>

var tela = document.querySelector("canvas");  //criou a variável que busca no HTML o canvas
var paleta = document.querySelector("input");  //criou a variável que busca no HTML a paleta de cores Obs.: O que você coloca dentro do parênteses é  "input" e não "color", pois você quer puxar o que está sendo colocado no input

//color é o tipo de entrada que você está querendo que o HTML apresente para o seu usuário escolher e o input é o que foi colocado lá dentro, a cor que foi escolhida. Então, é o input que você quer saber.

...

    //Parte do código que desenha os círculos

    pincel.fillStyle = paleta.value; // aqui você coloca a variável "paleta" + ".value" para que o pincel pegue o valor de dentro da entrada
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2*3.14);
    pincel.fill();

<script>

Chegou a hora de transformar