[Javascript] input variabili di scrittura con canvas

Discussione in 'Javascript' iniziata da lanvoel39, 13 Settembre 2019.

  1. lanvoel39

    lanvoel39 Nuovo Utente

    Registrato:
    5 Settembre 2019
    Messaggi:
    2
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Con il codice che riporto vorrei scegliere, mediante l’input, i valori delle proprietà del testo, oltre che il testo stesso, con canvas, usando delle apposite variabili letterali.
    Le variabili riguardanti il testo, la posizione e il colore funzionano:

    ctx.fillStyle=colore;
    ctx.fillText(testo, xP, yP);
    ctx.strokeStyle=col_bo;
    ctx.strokeText(testo, xP, yP);

    Invece le variabili riguardanti il font-family, font-size, font-style e font-weight invece non funzionano.
    Infatti se nel codice riportato si mette il commento alla riga di codice:
    ctx.font = "stile peso dim_car+'px' font_family";
    e si toglie il commento alla riga di codice:
    //ctx.font = "normal bold 80px Arial";
    tutto funziona regolarmente perché alle variabili stile, peso, dim_car , font_family , si sostituiscono i valori normal, bold, 80px, font_family.
    Perché la riga ctx.font = "stile peso dim_car+'px' font_family"; non viene accettata? Grazie

    lanvoel39

    Codice:
    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid blue;">
    </canvas>
    <FIELDSET style=" width: 200px; height: 350px; position: absolute; left:550px; top:20px; background: aqua;"><LEGEND>scrittura testo</LEGEND>
    <TABLE border=0>
    <TR><TD>
    testo:<input type="text" id="testo1" size=10><br>
    xP=<input type="text" id="xP1" value="100" size=7><br>
    yP=<input type="text" id="yP1" value="100" size=7><br>
    colore=<input type="text" id="colore1" value="red" size=10><br>
    col_bo=<input type="text" id="col_bo1" value="blue" size=10><br><br>
    
    dim_car<input type="text" id="dim_car1" value="24" size=7><br>
    stile:<input type="text" id="stile1" value="italic" size=7><br>
    font_family<input type="text" id="font1" value="Arial" size=10><br>
    peso=<input type="text" id="peso1" value="bold" size=7><br><br>
    
    <input type="button" id="testo2" value="scrivi testo" onclick="do_testo()"><br>
    </TABLE></FIELDSET>
    
    <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    function do_testo()
    {
    testo=testo1.value;
    colore=colore1.value;
    col_bo=col_bo1.value
    xP=xP1.value;
    yP=yP1.value;
    dim_car=dim_car1.value;
    stile=stile1.value;
    font_family=font1.value;
    peso=peso1.value;
    ctx.beginPath();
    ctx.font = "stile peso dim_car+'px' font_family";    
    //ctx.font = "normal bold 80px Arial";      
     ctx.lineWidth=1;
     ctx.fillStyle=colore;                 // colore riempimento
     ctx.fillText(testo, xP, yP);          //riempimento
     ctx.strokeStyle=col_bo;                  // colore bordo
     ctx.strokeText(testo, xP, yP);           //bordo
    ctx.closePath();
    }
    </script> 
    </body>
    </html>
    
     
  2. f107

    f107 Utente Attivo

    Registrato:
    7 Agosto 2012
    Messaggi:
    181
    Mi Piace Ricevuti:
    4
    Punteggio:
    18
    Occupazione:
    programmatore
    Località:
    Roma
    Ciao!
    è sbagliata l'assegnazione del ctx.font, prova così: ctx.font = ''.concat(stile, ' ', peso, ' ', dim_car, 'px ', font_family)
    una demo online: https://jsfiddle.net/L6jp2q8m/

    Se non è chiaro o non va fammi sapere
     
  3. lanvoel39

    lanvoel39 Nuovo Utente

    Registrato:
    5 Settembre 2019
    Messaggi:
    2
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Grazie mille f107, è chiarissimo: la soluzione è la concatenazione dei valori delle variabili.
    Ho provato poi che per far funzionare anche la dimensione dei caratteri 'px' si deve collegare a dim_car con il + e non con la virgola, così:
    ctx.font = ''.concat(stile, ' ', peso, ' ', dim_car + 'px ', font_family)
    Ancora grazie e un saluto

    lanvoel39
     
    A f107 piace questo elemento.
Sto caricando...

Condividi questa Pagina