Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Pincel de colores con Borrador

Este es mi programa, el cual agregue un punto extra para poder limpiar el canva :D

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

<script>
  var color = ['red', 'green', 'Blue'];
  var indice = 0;
  var pantalla = document.querySelector('canvas');
  var pincel = pantalla.getContext('2d');

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

  var puedoDibujar = false;

  function dibujarCirculo(evento) {
    if (puedoDibujar) {
      var x = evento.pageX - pantalla.offsetLeft;
      var y = evento.pageY - pantalla.offsetTop;
      pincel.fillStyle = color[indice];
      pincel.beginPath();
      pincel.arc(x, y, 5, 0, 2 * 3.14);
      pincel.fill();
    }
  }

  pantalla.onmousemove = dibujarCirculo;

  function habilitarDibujar() {
    puedoDibujar = true;
  }

  function deshabilitarDibujar() {
    puedoDibujar = false;
  }

  function paletaColores() {
    pincel.fillStyle = color[0]; //rojo
    pincel.fillRect(0, 0, 50, 50);
    pincel.fillStyle = color[1]; //verde
    pincel.fillRect(50, 0, 50, 50);
    pincel.fillStyle = color[2]; //azul
    pincel.fillRect(100, 0, 50, 50);
    pincel.fillStyle = '#DDDDDD'; //borrador
    pincel.fillRect(575, 0, 25, 25);
  }

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

    //condicion para cambiar de colores deacuerdo a sus coordenadas
    if (x > 0 && x < 50 && y > 0 && y < 50) {
      indice = 0;
      alert('Pincel Rojo');
    } else if (x > 50 && x < 100 && y > 0 && y < 50) {
      indice = 1;
      alert('Pincel Verde');
    } else if (x > 100 && x < 150 && y > 0 && y < 50) {
      indice = 2;
      alert('Pincel Azul');
    } else if (x > 575 && x < 600 && y > 0 && y < 25) {
      pincel.fillStyle = 'grey';
      pincel.fillRect(0, 0, 600, 400); //volver a pintar el canva del color original
      paletaColores(); //volver a dibujar la paleta de colores
    }
  }

  //ejecucion de codigo
  paletaColores();

  pantalla.onclick = cambioColor; //capturar clic del mase para cambiar de color

  pantalla.onmousedown = habilitarDibujar; //capturar presioando el clic izquierdo para colorear

  pantalla.onmouseup = deshabilitarDibujar;
</script>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

¡Hola Julio! ¡Deseo que estés bien!

¡Muchas Felicidades!

¡Gracias por compartir tu código con nosotros! Nos alegra mucho ver tu avance en las prácticas, éstas te darán un mayor fundamento en el aprendizaje. ¡Continua con ese mismo entusiasmo y no te desanimes!

En lo esencial, para agilizar el tiempo de respuesta que damos a ustedes, estamos priorizando el foro para postear las dudas como: errores, bugs y cualquier otro problema referente a los cursos.

En cambio, si deseas compartir tu código, ideas o actividades dispusimos en Discord un canal exclusivo para ese fin (⛓┇comparte-tu-codigo-logica) Allí, tus compañeros de estudios podrán ayudarte compartiendo conocimientos. ¡Esta interacción es muy importante para la participación de los alumnos y puede ayudarte a expandir tu red de contactos!

Te dejo éste link que muestra donde puedes compartir tus actividades

¡Te deseo mucho éxito en tus estudios! y recuerda que aquí estaremos para apoyarte!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!