5
respuestas

Mejorando el codígo para rellenar tanto en x como en y

Usando canvas

5 respuestas

Hola Gilbert,

No logramos entender lo que quisiste decir en este post.

Si conseguiste la solución te sugerimos implementar en código y compartir para poder ver las diferentes soluciones al mismo problema.

Puedes hacerlo clicando en este botón y colocando tu código entre los acentos: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

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

lo siento no me hice entender, la solución está en el código que postee

Como se muestra en la imagen de abajo, su código no aparece para nosotros aquí, así que te mostré en mi comentario arriba cómo usted puede hacer para publicar su código en nuestro foro.

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

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
<meta charset="UTF-8">

<h1 >Usando canvas</h1>

<!--Creamos nuestro espacio de dibujo-->
<canvas  width="600" height="400">

</canvas>
<!--Creamos nuestro espacio de Script-->
<script >

/*
Creamos función para dibujar con parámetros
*/
    function draw(x,y,w,h,color){

    var screen=document.querySelector("canvas");
    var brush= screen.getContext("2d");

    /*
    pasamos parámetros y atributos al pincel
    */
    brush.fillStyle=color;
    brush.fillRect(x,y,w,h);
    brush.strokeStyle="black";
    brush.strokeRect(x,y,w,h);


    }
    /*
    definimos las variables necesarias
    */
    var width=600;
    var height=400
    var w=50;
    var h=50;
    var x=0;
    var y=0;
    var color=["red","green","blue","yellow","black","purple"];
    var iColor=0;

    /*
    creamos bucle for para rellenar el rectangulo
    */
    for(var i=0;i<=width;i++){
        /*
        llamamos la función draw y le pasamos los parámetros
        */
        draw(x,y,w,h,color[iColor]);
        x=x+50;
        iColor++;
        /*
        si el array de color llego a su ultima posición se reinicia
        */
        if(iColor>5){
            iColor=0;
        }
        /*
        cambiando la posición de y para rellenar en vertical
         */
        if(i===width && y<=height){
            y=y+50;
            x=0;
            iColor++;
            i=0
            /*
            alterando el orden de los colores para que no queden en vertical
            */
            if(iColor===5){
                iColor=1;
                iColor++;
            }
        }


    }

Intenté ejecutar tu código pero no funciona, al parecer tiene algún error. Por ejemplo, veo que hay comparación en el if con tres iguales ===, me parece que eso es incorrecto.

Saludos