Entrar Ainda não tem acesso?
2
respostas

Consegui fazer dessa forma

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Gráfico de barras

por Poliana Beatriz do Amarante
| 100.9k xp | 79 posts
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0 ,600,400);

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

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


    }
    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

    desenhaTexto(205 , 120 , "2015");
    desenhaTexto(358 , 120 , "2016");


  desenhaBarra(200 , 150 , 50 , 50 , "blue");
  desenhaBarra(200 , 200 , 50 , 25 , "green");
  desenhaBarra(200 , 225 , 50 , 20 , "yellow");
  desenhaBarra(200 , 240 , 50 , 5 , "red");


  desenhaBarra(350 , 150 , 50 , 65 , "blue");
  desenhaBarra(350 , 216 , 50 , 20 , "green");
  desenhaBarra(350 , 237 , 50 , 13 , "yellow");
  desenhaBarra(350 , 252 , 50 , 2 , "red");

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
por Carla Rebeca de Sousa Andrade
| 21.1k xp | 4 posts

Fiz o meu assim também e queria saber se está certo !

por Edevaldo morais Neto
| 32.7k xp | 3 posts
Eletrotécnico

boa noite, vc alcancou o objetivo do exercicio sim, esta correto... Eu incrementei e adicionei valores em porcentagem! Sem acentos pois meu teclado ta maluco hehehe.

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

<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x, y, texto) {
        let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');

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

    // Funcao que cria a legenda 
    function criaLegenda(navegador2015, navegadores2016, cores){

        let y = 0;

        for(let i = 0; i < navegadores2015.length; i++){
            desenhaTexto(0,y+80,navegadores2015[i]);
            y=y+30;
        } 
        for(let i = 0; i < navegadores2016.length; i++){
            desenhaTexto(315,y-40,navegadores2016[i]);
            y=y+30;
        }   // for1 itera 2015, for2 itera 2016
    }

    // cria os anos
    function criaAsDatas(anos){

        let x = 0;

        for(let i = 0; i < anos.length; i++){
            desenhaTexto(150+x,50,anos[i]);
            x += +100;
        } // Aqui x recebe ele mesmo mais 100, sem ele 2016 fica desalinhado
    }

    // Cria o gráfico para cada Ano
    function desenhaGrafico(x, y, serie, cor, anos) {

        criaLegenda(navegadores2015, navegadores2016, cor);

        let somaAltura = 0;

        for (let i = 0; i < serie.length; i++) {
            criaAsDatas(anos);
            desenhaRetangulo(x, y + somaAltura, 50, serie[i], cores[i]);    
            somaAltura = somaAltura + serie[i]; 

        }
    }
    // Variaveis globais dos quadrados
    let serie2015 = [50,25,20,5];
    let serie2016 = [65,20,13,2];
    // Variaveis globais das cores
    let cores = ['blue','green','yellow','red'];
    // Variaveis globais das datas, possibilita altera-las num lugar so
    let anos = [2015,2016];
    // Variaveis globais dos navegadores
    let navegadores2015 = ['Chrome 50%', 'Firefox 25%', 'Safari 20%', 'Opera 5%'];
    let navegadores2016 = ['Chrome 65%', 'Firefox 20%', 'Safari 13%', 'Opera 2%'];

    desenhaGrafico(140,70,serie2015,cores, anos);
    desenhaGrafico(240,70,serie2016,cores, anos);

</script>