Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Dibujando barras

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CANVAS</title>
    </head>

<body>


    <canvas width = "600" height = "400"></canvas>
    <script>
        var serie2009 = [6,47,41,3,3];
        var serie2019 = [81,9,3,3,4];
        var colores = ["blue","green","yellow","red","gray"];
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        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 escribirTexto(x,y,texto){

            pincel.fillFont = "15px, Georgia";
            pincel.fillStyle = "black";
            pincel.fillText(texto,x,y);
        }

        function dibujarBarra(x, y, serie, colores, texto) {

            escribirTexto(x, y - 10, texto);
            var sumaAltura = 0;

            for (var i = 0; i < serie.length; i++) {
                var altura = serie[i];

                dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
                sumaAltura = sumaAltura + altura;
                }
        }

        dibujarBarra(50, 50, serie2009, colores, "2009");
        dibujarBarra(150, 50, serie2019, colores, "2019");

    </script>
</body>
</html>
2 respuestas

Hola Alexander , espero que esté bien.

Gracias por compartir tu código con nosotros, he probado aquí y el resultado ha sido muy bueno.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

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

Gracias por compartir tu código, lo probé y funciona perfecto. Saludos cordiales.