Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Quero um biscoito e tirar uma duvida (tamanho do canvas não altera)

<meta charset="utf-8">

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


<script>

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



    function desenhaRetangulo(x, y, largura, altura, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, largura, altura);
        pincel.fillStroke = "black";
        pincel.strokeRect(x, y, largura, altura);

    }

    function desenhaTexto(x, y, texto, tamanho) {

        pincel.font= tamanho +'px Georgia';
            pincel.fillStyle='black';
        pincel.fillText(texto, x, y);

    }


    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];
    var cores = ['blue', 'green', 'yellow', 'red'];

    function desenhaBarra(x, y, serie, cores, texto) {

        var navegadores = ["Chrome", "Firefox", "Safari", "outros"];
        var largura = 60;

        var cores = ['blue', 'green', 'yellow', 'red'];

        desenhaTexto(x, y - 10, texto, "20");

        for(var posicao = 0; posicao < serie.length; posicao++) {

            var altura = serie[posicao] 
            desenhaRetangulo(x, y, largura, altura, cores[posicao])
            ;

            desenhaTexto(x + largura + 10, y + altura/2, "-" + navegadores[posicao], "15")
            y = y + altura;
        }
    }    


    desenhaBarra(50, 50, serie2015, cores, '2015');


</script>

Consegui fazer o exercício revendo a aula do curso anterior de looping (que ainda não tá bem sedimentado, mas tá indo). Adicionei também uma legenda (e a variável de tamanho do texto, para diferenciar o nome da barra da legenda) como sugerido no início do exercício, e fiquei muito satisfeito com o feito só que não tá 100%. Se o professor (ou quem se dispor) reparar no código acima, ele gera a barra de 2015 sem problemas, mas ao tentar gerar as duas barras, aparece que não sobra lugar na tela. Já tentei mudar o tamanho no comando canvas, mas não fui bem sucedido como havia sido nos exercícios de desenho.

Esse impedimento também me atrapalhou na hora de aumentar o tamanho da altura dos retângulos afim de corrigir o tamanho das legendas (que se atropelam por causa do 2% do retangulo ''outros'', na barra 2016).

Alguma sugestão?

Fico grato,

2 respostas
solução!

O correto é escrever:

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

Para exibir as duas barras, use:

desenhaBarra(50, 50, serie2015, cores, '2015');

desenhaBarra(200, 50, serie2016, cores, '2016');

Ah, valeu, Gabriel. Deixei passar batido e tava logo nas primeiras linhas hahaha

adicionei um * 1.5 à variável altura, ficando assim:

var altura = serie[posicao] * 1.5

para as legendas não se atropelarem e manter a proporção das barras. GG, clan