Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] lo visto en clase

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Haz lo que hicimos en el aula

por Juan Sebastian Cueto Martinez
| 84.8k xp | 39 posts
auxiliar de aduanas 
<canvas width="600"height="400"></canvas>

        <script>

        function dibujarCuadrado(x,y,color){
            var pantalla = document.querySelector("canvas"); 
            var pincel = pantalla.getContext("2d"); 

            pincel.fillStyle = color;
            pincel.fillRect(x,y,50,50);
            pincel.strokeStyle ="black";
            pincel.strokeRect(x,y,50,50);
          }


          for(var x = 0; x < 600; x = x + 50){
              dibujarCuadrado(x,0,"yellow");
              dibujarCuadrado(x,50,"blue");
              dibujarCuadrado(x,100,"red");
          }







        </script>
1 respuesta
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Juan!

Vi que publicaste un código en JavaScript para dibujar cuadrados en un canvas. ¿En qué puedo ayudarte? ¿Tienes alguna duda o problema con el código?

Si necesitas alguna explicación sobre cómo funciona el código, te puedo decir que la función "dibujarCuadrado" recibe tres parámetros: las coordenadas x e y donde se dibujará el cuadrado y el color que se utilizará para rellenarlo. Luego, se selecciona el canvas y se obtiene su contexto 2D para poder dibujar en él.

El for loop que sigue llama a la función "dibujarCuadrado" varias veces, dibujando cuadrados de diferentes colores en filas horizontales.

Si tienes alguna otra pregunta, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!

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