3
respuestas

por José Pablo Rivera Barrales

| 44.2k xp | 2 posts

Hola buen día.

Espero me puedan ayudar, mi funcion dibujar cuadrado por si sola, funciona correctamente, solo que al realizar el ejercicio de DibujarBarra mi script no realiza absolutamente nada y no puedo encontrar mi error, espero puedan apoyarme revisando el codigo y apoyandome a ver mi error:

<Meta charset="UTF-8">

<h1>Uso de Canvas</h1>

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


</canvas>

<script>
    function saltarlinea(veces){
        for (var i = 0; i < veces; i++) {
            document.write("<br>");
        }
        document.write("<br>");
        }

    function imprimir(texto){

        document.write(texto);
        saltarlinea(1);
    }    
    var pantalla;
    var pincel;




    function dibujarCuadrado(x,y,ancho,alto,color,linea){
        pantalla= document.querySelector("canvas");
        pincel = pantalla.getContext("2d");
        pincel.fillStyle= color;
        pincel.strokeStyle = linea;
        pincel.fillRect(x,y,ancho,alto,color,linea);
        pincel.strokeRect(x,y,ancho,alto);

    }

    function dibujarBarra(x,y,serie,color,titulo)
    {
        var alturaAcumulada=0;
        for(var i=0;i<serie.lenght;i++){
            var altura = serie[i];
            var color = color[i];

            dibujarCuadrado(x,y + alturaAcumulada,100,altura,color,color);
            alturaAcumulada = alturaAcumulada+altura;

        }

    }

    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];


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

    </script>

3 respuestas

por José Pablo Rivera Barrales

| 44.2k xp | 2 posts

22/04/2023

Uso de Canvas

por Adrian Alberto Arrazola Amador

| 17.2k xp | 2 posts

22/04/2023

Hola Jose Pablo Rivera. Hay varias cosas que sugerirte en tu codigo, ire en el orden de codificacion para darme entender.

Tu funcion dibujarCuadrado da la posibilidad de darle el color que uno digite al bordeado, pero para la utilización de los comandos es importante el orden de los codigos; te sugiero que si por ejemplo vas hacer un rectangulo primero coloques el comando .fillStyle y luego .fillRect, es decir, primero codificas el color y luego codificas el rectangulo, y si depues haras el bordado codificas el color del bordado y luego codificas el .strokeRect. Igual para este ejercicio el bordado era negro, entonces quite tu variable linea de todo el ejercicio.
En tu función dibujar barra colocaste una variable titulo que era para la funcion escribir, pero nunca hiciste ni llamaste la función, ahi falto eso; ademas, el comando para el tamaño del array es .length y tenias escrito ght, nunca te iba a dibujar las barras, es un error común pero hay que estar pendiente de la ortografia de los comandos, y para el ancho de las barras es 50. Aqui te pego tu codigo corregido para que lo chequees, espero haber resuelto tus dudas.

por Adrian Alberto Arrazola Amador

| 17.2k xp | 2 posts

22/04/2023

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

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

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

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

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

  function dibujarBarra(x, y, serie, colores, titulo) {
    escribirTexto(x, y - 10, titulo);

    var alturaAcumulada = 0;
    for (var i = 0; i < serie.length; i++) {
      var altura = serie[i];
      dibujarCuadrado(x, y + alturaAcumulada, 50, altura, colores[i]);
      alturaAcumulada = alturaAcumulada + altura;
    }
  }

  var colores = ["blue", "green", "yellow", "red", "gray"];
  var serie2009 = [6, 47, 41, 3, 3];
  var serie2019 = [81, 9, 3, 3, 4];

  dibujarBarra(50, 50, serie2009, colores, "2009");
  dibujarBarra(150, 50, serie2019, colores, "2019");
</script>