Autor Tema: HTML5 y JavaScript api Canvas dibujo de formas geométricas en navegador CU01195E (Leído 4335 veces)

bermartinv · « **en:** 06 de Abril 2016, 10:05 »

Hola chicos, adjunto mi solución a este ejercicio CU01195E del curso de programación básica con JavaScript.

Citar

Este ejercicio no forma parte del curso, por eso se califica como opcional. El ejercicio consiste en dibujar la bandera de tu país usando canvas y JavaScript. La respuesta al ejercicio debe ser el código que genere la bandera.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #myCanvas{
        border:solid thin black;
    }    
</style>
<script>
window.onload = function(){
    var elemento = document.getElementById("myCanvas");
    /* primera franja de color roja */
    var bandera = elemento.getContext("2d");
    bandera.fillStyle = "#FF0000";
    bandera.fillRect(0,0,400,100);
    
    /* segunda franja de color amarillo */
    bandera.fillStyle = "#FFFF00";
    bandera.fillRect(0,100,400,100);
    
    /*tercera franja de color rojo */
    bandera.fillStyle = "#FF0000";
    bandera.fillRect(0,200,400,100);
}

</script>

</head>
<body>
    <canvas id="myCanvas" width="400" height="300">
</canvas>

</body>
</html>

Saludos!!!

César Krall · « **Respuesta #1 en:** 07 de Abril 2016, 14:42 »

Hola! Perfecto...

Saludos!

Reinier Garcia · « **Respuesta #2 en:** 05 de Mayo 2017, 07:39 »

: )
Saludos a todos.

Aquí les dejo mi respuesta al ejercicio opcional del capítulo CU01195E del curso de Programación Básica con JavaScript. Mi función permite dibujar la bandera de forma completamente proporcional, definiéndose tan solo el ancho de la misma y sin importar cuál este sea. Siempre se va a ver apropiadamente escalada.

Citar

Este ejercicio no forma parte del curso, por eso se califica como opcional. El ejercicio consiste en dibujar la bandera de tu país usando canvas y JavaScript. La respuesta al ejercicio debe ser el código que genere la bandera.

Muy bueno el curso. Gracias a todos.
Bye.

El código html no es relevante. Como ejemplo sirve un simple fichero que contenga tan solo un canvas:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Curso Básico de JavaScript</title>

        <!-- *** Características Básicas de la Página Web *** -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Portal web aprenderaprogramar.com">
        <meta name="keywords" content="aprender, programar, cursos, libros">

        <!-- Icono de la página web -->
        <link rel="icon" type="image/png" href="icons/javascript-icon.png"/>

        <!-- ***** Ficheros Externos con Código JavaScript ***** -->

        <!-- ** Dirección del fichero .js con funciones y eventos definidos por el Programador ** -->
        <script type="text/javascript" src="js_files/Page95APICanvas.js"></script>

        <!-- Fichero adicional (dibujar figuras) -->
        <script type="text/javascript" src="js_files/canvasEstrella.js"></script>

    </head>

    <!-- Contenido de la página web -->
    <body>

                    <canvas id="canvas1" width="200" height="400" style="border-style:solid;">
                        Su navegador no tiene soporte para mostrar el contenido
                    </canvas>     

    </body>
    <!-- Fin del contenido de la página web -->
</html>

El código JavaScript principal está definido en un fichero aparte:

Código: [Seleccionar]

//Para cuando culmine con éxito la carga de la pagina
window.onload = function () {

//Asignamos los eventos a los componente html
    AsignarEventos();

};


// Asigno las funciones para cada evento de cada componente
function AsignarEventos() {

    /* Capítulo 95: API Canvas */


    /* Ejercicio Opcional: Dibujar bandera de USA */
    drawUSAFlag(400);

}


/**
 * Crea una bandera de USA, en un objeto canvas seleccionado en el DOM.
 *
 * @param flagWidth Ancho de la bandera.
 */
function drawUSAFlag(flagWidth) {

    var proporcionDePixels = flagWidth;

    /* Defino las dimensiones de cada componente de la bandera, guiándome por las medidas oficiales  */
    var alturaBandera = 1 * proporcionDePixels;
    var anchuraBandera = 1.9 * proporcionDePixels;
    var altoDelCanton = 0.5385 * proporcionDePixels;
    var anchoDelCanton = 0.76 * proporcionDePixels;
    var lineaDeExtrellas = 0.0538 * proporcionDePixels;
    var columnaDeExtrellas = 0.0633 * proporcionDePixels;
    var diametroDeLaEstrella = 0.0616 * proporcionDePixels;
    var anchoDeLasFranjas = 0.0769 * proporcionDePixels;

    /* Colores Oficiales Exactos de cada componente de la bandera */
    var starColor = '#FFFFFF';
    var oldGloryRedColor = '#BE0D34';
    var oldGloryBlueColor = '#002C77';

    /* Selecciono mi canvas en el DOM */
    var elemento = document.getElementById('canvas_usa');

    /* Si se puede seleccionar el canvas... */
    if (elemento && elemento.getContext) {

        /* Defino el contexto */
        var ctx = elemento.getContext('2d');

        /* Si se puede definir el contexto... */
        if (ctx) {

            /* Defino las dimensiones externas de la bandera */
            elemento.width = anchuraBandera;
            elemento.height = alturaBandera;

            /*----------------------------------------------------------------------------------------------------------
             -->  Comienzo dibujando un rectángulo blanco con las dimensiones de la bandera  <--  
             ---------------------------------------------------------------------------------------------------------*/

            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(0, 0, anchuraBandera, alturaBandera);

            /*----------------------------------------------------------------------------------------------------------
             -->  Dibujo el Rectángulo Superior Izquierdo (OldGloryBlue)  <--  
             ---------------------------------------------------------------------------------------------------------*/

            ctx.fillStyle = oldGloryBlueColor;
            ctx.fillRect(0, 0, anchoDelCanton, altoDelCanton);

            /*----------------------------------------------------------------------------------------------------------
             -->  Dibujo las 7 Franjas Rojas (OldGloryRed)  <--  
             ---------------------------------------------------------------------------------------------------------*/

            /* Dibujo las 4 franjas rojas cortas */
            ctx.fillStyle = oldGloryRedColor;
            ctx.fillRect(anchoDelCanton, 0, (anchuraBandera - anchoDelCanton), anchoDeLasFranjas);
            ctx.fillRect(anchoDelCanton, anchoDeLasFranjas * 2, (anchuraBandera - anchoDelCanton), anchoDeLasFranjas);
            ctx.fillRect(anchoDelCanton, anchoDeLasFranjas * 4, (anchuraBandera - anchoDelCanton), anchoDeLasFranjas);
            ctx.fillRect(anchoDelCanton, anchoDeLasFranjas * 6, (anchuraBandera - anchoDelCanton), anchoDeLasFranjas);

            /* Dibujo las 3 franjas rojas más largas */
            ctx.fillRect(0, (altoDelCanton + (anchoDeLasFranjas * 1)), anchuraBandera, anchoDeLasFranjas);
            ctx.fillRect(0, (altoDelCanton + (anchoDeLasFranjas * 3)), anchuraBandera, anchoDeLasFranjas);
            ctx.fillRect(0, (altoDelCanton + (anchoDeLasFranjas * 5)), anchuraBandera, anchoDeLasFranjas);

            /*----------------------------------------------------------------------------------------------------------
             -->  *** Dibujo ahora las 50 Estrellas Blancas ***  <--  
             ---------------------------------------------------------------------------------------------------------*/

            // Coordenadas del centro de la 1ra estrella:
            var centroX = columnaDeExtrellas;
            var centroY = lineaDeExtrellas;

            // Defino el Radio de la circunferencia que circunscribe a la estrella:
            var starExternalRadio = (diametroDeLaEstrella / 2);

            // Defino el Radio interno de la estrella:
            var starInnerRadio = starExternalRadio / 2.5;

            /* Defino otros datos de las estrellas */
            var cantidadPicos = 5;
            var starLineWidth = 0; // Grosor de las líneas
            var borderColor = starColor; // Color blanco en este caso
            var fillColor = starColor; // Color blanco en este caso

            /* Dibujo las 5 filas, con 6 estrellas cada una */
            for (var i = 1; i < 10; i += 2) {

                for (var j = 1; j < 12; j += 2) {

                    drawStar(ctx, centroX * j, centroY * i, cantidadPicos, starExternalRadio, starInnerRadio, borderColor, fillColor, starLineWidth);

                }

            }

            /* Dibujo las 4 filas, con 5 estrellas cada una */
            for (var k = 2; k < 9; k += 2) {

                for (var m = 2; m < 11; m += 2) {

                    drawStar(ctx, centroX * m, centroY * k, cantidadPicos, starExternalRadio, starInnerRadio, borderColor, fillColor, starLineWidth);

                }

            }

        }

    }

}

En otro fichero javaScript se define el dibujo de cada estrella.

Código: [Seleccionar]

/**
 * Crea una estrella, en un objeto canvas que se recibe por datos, circunscrito en una circunferencia definida.
 *
 * @param ctx Context "2d" en el que se dibujará la estrella.
 * @param cx coordenada en X del centro de la circunferencia que circunscribe a la estrella.
 * @param cy coordenada en Y del centro de la circunferencia que circunscribe a la estrella.
 * @param spikes Cantidad de puntas de la estrella.
 * @param outerRadius Radio de la circunferencia que circunscribe a la estrella.
 * @param innerRadius Radio de la circunferencia interna de la estrella.
 * @param borderColor Color del borde de la estrella.
 * @param fillColor Color del relleno de la estrella .
 * @param starLineWidth Grosor del trazo de la estrella.
 */
function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius, borderColor, fillColor, starLineWidth) {
    
    var rot = Math.PI / 2 * 3;
    var x = cx;
    var y = cy;
    var step = Math.PI / spikes;

    ctx.beginPath();
    ctx.moveTo(cx, cy - outerRadius);
    
    for (i = 0; i < spikes; i++) {
        
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        ctx.lineTo(x, y);
        rot += step;

        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        ctx.lineTo(x, y);
        rot += step;
        
    }
    
    ctx.lineTo(cx, cy - outerRadius);
    ctx.closePath();
    ctx.lineWidth = starLineWidth;
    ctx.strokeStyle = borderColor;
    ctx.stroke();
    ctx.fillStyle = fillColor;
    ctx.fill();
    
}

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: