0

Tenho um menu de botões sendo exibido, e quando clico em um deles, acontecem algumas operações e em seguida deve ser exibido um canvas com texto.

Acontece que, essas operações todas acontecem, mas a geração do canvasnão acontece... No console do navegador nenhum erro é exibido.

No html minha canvas está assim:

<canvas class="canvasCentral" id="bordas" width="400" height="500">

</canvas>

A classe "canvasCentral" do css: (O arquivo css está sendo carregado no html onde tem esse canvas).

.canvasCentral{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        border:3px solid #D8D8D8;
        border-radius: 20px;
        display:block      //Isso aqui estava "none" para ser exibido somente quando eu quiser. tentei botar "block" mas a canvas continua não aparecendo.

}

ESSA É A FUNÇÃO QUE DESENHA A CANVAS: Ela recebe uma string como parâmetro. Ao executar essa função, NADA ACONTECE, e o menu anterior continua senhdo exibido. Eu marquei display "none" na div desse menu anterior também pra ver. Ele some, mas a canvas continua não aparecendo.... OBS: O SCRIPT QUE CONTÉM ESSA FUNÇÃO ESTÁ CORRETAMENTE CARREGADO NO HTML DA CANVAS :

   function formaCanvas(res){

        var arrayDaConta = [];


        var agencia="";
        var conta="";
        var saldo="";
        var nome = "";

        var valores = separaValores(res, agencia, conta, saldo, nome);


                var text = "Escrevendo no canvas";
                var moldura = document.getElementById("bordas");

                var ctx = moldura.getContext("2d");
                console.log(ctx);
                console.log("obteve as bordas e o contexto 2d");
                 //A FRASE ACIMA É EXIBIDA NA CONSOLE.... !!!!

                ctx.font = "12pt Arial";
                ctx.fillStyle = "black";
                ctx.textAlign = "center";
                var linhaInicial=30;
                ctx.fillText("SisOnBank - Sistema de Informações do OnBank", 200, linhaInicial);

                var linha = novaLinha(linhaInicial);
                linha = novaLinha(linha);
                ctx.textAlign = "center";
                ctx.fillText("Cliente: "+valores.nome, 200, linha);


                linha = novaLinha(linha);
                ctx.textAlign = "left";
                ctx.fillText("Agência: "+valores.agenciaPreenchida, 20, linha);

                ctx.textAlign = "rigth";
                ctx.fillText("Conta: "+valores.contaPreenchida, 380, linha);

                linha = novaLinha(linha);
                ctx.textAlign = "rigth";
                ctx.fillText("Saldo atual: " +valores.saldoPreenchido, 145, linha);

                linha = novaLinha(linha);


        }

    }

Função auxiliar nova linha:

function novaLinha(line){
            return line+18;
        }

Função auxiliar selecionaValores: Não creio que tenha influência no problema, ela apenas retorna uma string

function separaValores(resultQuery, agencia, conta, saldo, nome){
        /* ESTE LAÇO SEPARA DA STRING DA QUERY VINDA DO PHP (RES)
    O NÚMERO DE AGÊNCIA, DA CONTA E O SALDO */

    var alfabetico = /\w/;
    for (var x=0; x<resultQuery.length; x++){
            //PEGA O NÚMERO DA AGÊNCIA
        if(agencia.length == 0){
            while(isNumero(resultQuery[x])){
                agencia = agencia.concat(resultQuery[x]);
                x++;
            }
        }

        //PEGA O NÚMERO DA CONTA
        if (resultQuery[x] == "," && conta.length==0 && agencia.length != 0){
            x++; x++;
            while(isNumero(resultQuery[x])){
                conta = conta.concat(resultQuery[x]);
                x++;
            }
        }

        //PEGA O SALDO
        if (resultQuery[x] == "," && conta.length != 0 && agencia.length != 0){
            x++;x++
            while(isNumero(resultQuery[x])){
                saldo = saldo.concat(resultQuery[x]);
                x++;
            }
        }

        if (alfabetico.test(resultQuery[x]) && conta.length != 0 && agencia.length != 0 && saldo.length !=0){
            while(resultQuery[x] != "\""){
                nome = nome.concat(resultQuery[x]);
                x++;
            }
        }
    }

Não sei mas o que fazer. Agradeço desde já as dicas. ;)

2
  • 1
    falta a função separaValores() 8/06/2018 às 20:26
  • Ela retorna um String apenas. Não acredito que tenha influência no problema, mas vou adicionar alí. 9/06/2018 às 14:45

1 Resposta 1

0

Faltava setar o "display" no style da canvas como "block". Estava none. Simplesmente adicionei essa linha na função formaCanvas(res), logo após a variável moldura ser preenchida com o elemento canvas:

moldura.style.display = "block";

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .