Por que não podemos colocar o valor do input diretamente na função do círculo? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

3
respostas

por Gleison Barros De Moura

| 131.1k xp | 4 posts

Professor de Fisica

var tela = document.querySelector('canvas'); var paleta = document.querySelector('input') var pincel = tela.getContext('2d');

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

desenha = false;
function desenhaCirculo(evento) {

    if(desenha){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    pincel.fillStyle = paleta; //<------ COLOQUEI AQUI...
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2 * 3.14);
    pincel.fill();
    }
    console.log(x + ',' + y);
}
tela.onmousemove = desenhaCirculo;

function habilitaDesenhar(){ <-- APARENTEMENTE DEVERIA SER AQUI
    desenha = true;
}

function desebilitaDesenhar(){
    desenha = false;
}

tela.onmousedown = habilitaDesenhar;
tela.onmouseup = desebilitaDesenhar;

3 respostas

por Wendel Marins

| 83.8k xp | 59 posts

26/01/2022

Boa tarde, Gleison!

No caso o ".value" é uma propriedade que serve justamente para obter o valor do elemento de entrada (input), que nesse caso seria a paleta de cores "type="color"". Sem essa propriedade, o navegador só reconheceria o "input" vazio.

Ficaria tipo: "pincel.fillStyle = input"

Já com o .value fica tipo: "pincel.fillStyle = input.Obterpaleta(value)"

por Pedro Henrique Durand Reis

| 82.5k xp | 51 posts

27/01/2022

Eu fiquei com a mesma dúvida, obrigado Wendel.

por Diógenes Bahia Bezerra

| 124.5k xp | 130 posts

02/02/2022

Dei uma explicação em outro fórum sobre o mesmo problema.

Para você criar uma conexão entre um input do HTML no JavaScript você cria uma variável para ela. Então, quando você cria a variável "paleta" você está criando uma ponte para poder chamar/usar o input ( a entrada).

É por isso que quando você chama "paleta" você só está chamando o input, a entrada, e não o tem dentro dele.

Para pedir o valor que tem dentro da entrada você precisa usar a função ".value".

Espero ter ajudando. Sucesso na sua jornada!!

Mergulhe em programação