[Javascript] input variabili di scrittura con canvas

lanvoel39

Nuovo Utente
5 Set 2019
2
1
3
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>
 

lanvoel39

Nuovo Utente
5 Set 2019
2
1
3
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
 
  • Like
Reactions: f107