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

Paint basico automatizado con varios colores

Comparte mi codigo al cuál creí conveniente agregarle algunas validaciones y nuevas ideas.

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 
    var colores = ["blue","red","green","yellow","orange"]
    var base = 50
    var altura = 50
    function dibujarRectangulo(x, y, base, altura, color) {
        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }
    function todosColoresRectangulos(){
        i = 0
        while (i < colores.length){
            dibujarRectangulo(base*i,0,base,altura,colores[i])
            i++
        }
    }
    function habilitarDibujar(){
        puedoPintar = true
    }
    function deshabilitarDibujar(){
        puedoPintar = false
    }
    var colorDibujo = "blue"
    function colorEscogido(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if( (y < altura) &&
            (y > 0) ){
            var i = 0    
            while (i < colores.length){
                if (( x < base * (i+1)) &&
                (x > base * i) ){
                    colorDibujo = colores[i]
                    break
                }
                i++
            }    
        }
    }
    var puedoPintar = false
    function dibujarCirculo(evento){
            if (puedoPintar == true){ 
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorDibujo;
            pincel.beginPath();
            pincel.arc(x,y,10,0,2*3.14);
            pincel.fill();
            console.log(x + "," + y);        
        }
    }

        todosColoresRectangulos()
        pantalla.onclick = colorEscogido ;
        pantalla.onmousemove = dibujarCirculo ;
        pantalla.onmousedown = habilitarDibujar ;
        pantalla.onmouseup = deshabilitarDibujar ;
</script> 
1 respuesta

SI la finalidad última es ahorrar codigo, me parece excesivo hacer una funcion para dibujar 3 rectangulos de colores. No se tu opinión, pero como es con fines academicos para aprender como hacer una funcion esta bien.