Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Logica de Programação - Desenha na tela

Bom, pelo oque entendi existe algumas maneiras de chegar no mesmo resultado. no ultimo desafio deveríamos clicar na cor escolhida e conseguiria desenha com ela, fiz de um jeito, mas depois na correção estava de outro, mas a minha duvida está na semanticamente do código, se está realmente correto, eu existe algumas exigências que tornam o código mais limpo, sinto que as vezes esta bagunçado, alguem poderia me dar alguns conselhos etc..

<meta charset="UTF-8">

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

<script>

  function desenhaQuadrado(x, y, tamanho, cor) {

    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho)
    pincel.fill();
  }

  function desenhaCirculo(x, y, raio, cor) {

    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * 3.14);
    pincel.fill();

  }

  function desenhaPaletaDeCores() {

    desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
    desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
    desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

  }


  function lidaComMovimentoDoMouse(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    if (desenha && ondePodeDesenhar(x, y)) {
      if (desenha) {

        desenhaCirculo(x, y, 5, corAtual);
      }
    }
  }

  function habilitaDesenhar() {

    desenha = true;

  }

  function desabilitaDesenhar() {

    desenha = false;

  }

  function ondePodeDesenhar(x, y) {

    if (x >= 0 && x < 3 * tamanhoQuadrados && y >= 0 && y < tamanhoQuadrados) {
      return false;
    } else {
      return true;
    }
  }

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

  var desenha = false;
  var corAtual;
  var xVermelho = 0;
  var xVerde = 50;
  var xAzul = 100;
  var yQuadrados = 0;
  var tamanhoQuadrados = 50;


  function mudaCor(evento) {
    var x = evento.pageX; - tela.offsetLeft
    var y = evento.pageY; - tela.offsetTop;

    if ((x < 50) && (y < 50)) {

      corAtual = "red";

    } else if ((x < 100) && (y < 50)) {

      corAtual = "Green";

    } else if ((x >= 100) && (y < 50)) {

      corAtual = "Blue";

    }

  }


  desenhaPaletaDeCores();

  tela.onclick = mudaCor;
  tela.onmousemove = lidaComMovimentoDoMouse;

  tela.onmousedown = habilitaDesenhar;

  tela.onmouseup = desabilitaDesenhar;
</script>
1 resposta
solução!

Olá, Vinicius! Como vai?

Me desculpo pela demora da minha resposta.

Você pode usar constantes para definir as cores em vez de usar diretamente os valores. Por exemplo, você pode definir const COR_VERMELHA = 'red' e usar essa constante ao invés de escrever 'red' diretamente no código. Isso tornará o código mais legível e fácil de modificar no futuro.

Outra sugestão é utilizar o operador ternário para simplificar a função "ondePodeDesenhar". Em vez de usar um bloco "if-else", você pode escrever algo como return !(x >= 0 && x < 3 * tamanhoQuadrados && y >= 0 && y < tamanhoQuadrados).

Essas são apenas algumas sugestões para melhorar o código. Lembre-se de que existem várias maneiras de resolver um problema e cada pessoa pode ter sua própria abordagem. O importante é que o código esteja funcionando corretamente e seja fácil de entender e manter.

Espero ter ajudado. Fico à disposição!

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!