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

Diseñando con el mouse fk

<canvas width="1000" height="600"></canvas>
<script>

    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 1000, 600);
    var puedoDibujar = false;
    var colores = ["white","black","purple","blue","green","yellow","red","grey"]
    var indice = 0
    var radio = 5
    var limitePx

    function dibujarCuadroColor(x,y,i){
        pincel.fillStyle = colores[i]
        pincel.fillRect(x,y,50,50)
        pincel.strokeStyle = "black"
        pincel.strokeRect(x,y,50,50)
    }
    function paleta(){
        var aux = 0;
        for(var i = 0;i<colores.length;i++){
            dibujarCuadroColor(aux,0,i)
            aux+=50
        }
    }
    function cambiarColor(evento) {
        var x = evento.pageX - pantalla.offsetLeft
        var y = evento.pageY - pantalla.offsetTop
        var aux = 0;
        for(var i = 0;i<colores.length;i++){
            if((x<aux+50)&&(x>aux)&&(y<50)&&(y>0)){
                indice = i
                break
            }
            if((x>colores.length*50-50)&&(x<colores.length*50)){
            }
            else{
                radio=5
            }
            aux+=50 
        }
    }
    function dibujarPincel(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if((x<(colores.length*50+16))&&(x>0)&&(y<50+16)&&(y>0)){
            deshabilitarDibujar
        }
        else if(puedoDibujar) {
            pincel.fillStyle = colores[indice];
            pincel.beginPath();
            pincel.arc(x, y, radio, 0, 2 * 3.14);
            pincel.fill();
        }
    }
    function habilitarDibujar() {puedoDibujar = true;}
    function deshabilitarDibujar() {puedoDibujar = false;}

    paleta()
    pantalla.onclick = cambiarColor
    pantalla.onmousemove = dibujarPincel;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
</script>
1 respuesta

Hola Jahzeel, espero que estés bien!

Gracias por compartir tu código con nosotros, nos alegra mucho que estés practicando programación, la práctica es fundamental para consolidar tus nuevos conocimientos.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, ahí tenemos un canal exclusivo para esto #comparteTuCodigo, también puedes usar Linkedin para hacer esto, ya que el alcance es mayor y tu publicación puede llegar a más personas. Otra forma de guardar tus ejercicios es a través de Github, así a medida que avances podrás ir construyendo tu portafolio y en este caso el foro sería solo para aclarar cualquier duda que puedas tener sobre el contenido de los cursos.

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

¡Vamos juntos!

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