[Javascript] input variabili di scrittura con canvas

lanvoel39

Nuovo Utente
5 Set 2019
6
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
6
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
Discussioni simili
Autore Titolo Forum Risposte Data
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
L [Javascript] Select option in campi input Javascript 4
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
Emix [Javascript] Somma con array input HTML Javascript 1
A [Javascript] Multi input su due tabelle correlate Javascript 1
V [Javascript] [HTML] Attivazione nuovi campi di input Javascript 2
Daniele_Carrara [Javascript] Modifica input date Javascript 5
A [Javascript] Somma di input dinamici Javascript 1
D [Javascript] Input da un label Javascript 1
D [Javascript] Script che controlla quello che hai scritto nell'input Javascript 3
Alex1990000 [Javascript] autocompila campi input form Javascript 5
C [Javascript] Input request Javascript 3
elpirata [Javascript] Disabilitare campo input quando si aggiunge riga nuova Javascript 0
WebDr [Javascript] verifica input Javascript 8
V [Javascript] Funzioni su input dinamici Javascript 24
L [Javascript] indirizzare stringa come nome input text Javascript 1
E [Javascript] Assegnazione variabile da campo input di tipo "a calendario" Javascript 3
V [Javascript] Decimali in campo di input Javascript 1
Bunz [Javascript] somma orario input + calcolo straordinario Javascript 3
asevenx [Javascript] [HTML] personalizzare stili input select Javascript 5
G passaggio di una variabile da javascript a un valore di input Javascript 5
A [Javascript] incrementare varabile in campo input Javascript 9
C Un form di input e uno di output con funzione javascript Javascript 17
D Funzione javascript che pulisca un campo input Javascript 0
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1

Discussioni simili