tteixeira47

PaintOnline_CursoPixie

Sep 19th, 2020 (edited)
887
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <canvas width="600" height="400"></canvas>
  2. <br><br>
  3. <h3> <font face="Verdana"> Escolha uma cor </font> <input type="color" id="cor_selecionada"> </h3>
  4.  
  5. <script>
  6.    
  7.     //Definição da tela
  8.     var tela = document.querySelector('canvas');
  9.     var pincel = tela.getContext('2d');
  10.  
  11.     //Desenhando o canvas
  12.     pincel.fillStyle = 'grey';
  13.     pincel.fillRect(0, 0, 600, 400);
  14.  
  15.     var estaDesenhando = false;
  16.  
  17.     function desenha() {
  18.         estaDesenhando = true;
  19.     }
  20.  
  21.     function naoDesenha() {
  22.         estaDesenhando = false;
  23.     }
  24.  
  25.     function desenhaCirculo(evento) {
  26.  
  27.         var cor_escolhida = document.getElementById("cor_selecionada").value;
  28.  
  29.         if (estaDesenhando) {
  30.             var raio = 20;
  31.             var x = evento.pageX - tela.offsetLeft;
  32.             var y = evento.pageY - tela.offsetTop;
  33.             if (evento.shiftKey) raio = raio + 20;
  34.             pincel.fillStyle = cor_escolhida;
  35.             pincel.beginPath();
  36.             pincel.arc(x, y, raio, 0, 2 * 3.14);
  37.             pincel.fill();
  38.         }
  39.     }
  40.  
  41.     document.onmousemove = desenhaCirculo;
  42.  
  43.     document.onmousedown = desenha;
  44.  
  45.     document.onmouseup = naoDesenha;
  46.  
  47. </script>
RAW Paste Data