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

[Proyecto] Bandera de Chile

Es muy entretenido graficar con canvas, aunque hacer la estrella fue todo un desafío .

Captura de pantalla de Chrome mostrando el ejercicio con la bandera de Chile

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

</canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");


    pincel.fillStyle = "white";    //blanco
    pincel.fillRect(0,0,600,400); 

    pincel.fillStyle = "#0039a6";    //rojo
    pincel.fillRect(0,0,200,200); 

    pincel.fillStyle = "#d52b1e";    //azul
    pincel.fillRect(0,200,600,400); 

    /*pincel.fillStyle = "black"; //círculo guía para la estrella
    pincel.beginPath();
    pincel.arc(100,100,50,0,2*3.14);
    pincel.fill();*/

    pincel.fillStyle = "white"; // estrella
    pincel.beginPath();
    pincel.moveTo(100,50); //1
    pincel.lineTo(84,87); //<
    pincel.lineTo(52,87); //2
    pincel.lineTo(78,112); //<
    pincel.lineTo(70,142); //3
    pincel.lineTo(100,122); //<
    pincel.lineTo(130,142); //4
    pincel.lineTo(122,112); //<
    pincel.lineTo(148,87); //5
    pincel.lineTo(116,87); //<
    pincel.fill();

</script>

Para no perderme tanto hice la estrella sobre un círculo negro, que después comenté. También puse comentarios en cada línea de código que correspondía con las puntas, para distinguirlas. Así pude guiarme con las coordenadas y logré terminarlo más rápido.

1 respuesta

¡Hola, Carolina! Deseo que esté bien.

Muchas gracias por compartir tu proyecto con nosotros. Estamos muy contentos de poder acompañarte en tu camino de aprendizaje.

En lo esencial, en el foro estamos priorizando las dudas y errores.

Para compartir tus proyectos con nosotros y otros estudiantes, te recomiendo que lo haga en nuetro servidor de Discord. Allí tenemos un canal exclusivo para eso (⛓┇comparte-tu-codigo-logica).

Continúa con tus estudios y hasta la proxima.

¡Vamos juntos!

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