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
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>
