Nel codice che riporto qui sotto, scrivendo i valori degli attributi delle proprietà del testo , si ha la scrittura richiesta. Cancellando questi valori, scrivendone di nuovi e cliccando il pulsante “scrivi” non viene eseguita la nuova scrittura: per ottenerla si deve rilanciare il codice.
Non riesco a capire il perché. Devo notare che in programmi analoghi, anche senza cancellare i valori con un pulsante apposito, ma soltanto cambiandoli dopo averli selezionati con il mouse, l’istruzione può essere eseguita più volte, senza rilanciare il codice.
Desidero sapere per quale motivo ciò avviene. Grazie
lanvoel
codice:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue;">
</canvas>
<FIELDSET style=" width: 140px; height: 255px; 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>
<input type="button" id="testo2" value="scrivi testo" onclick="testo()"><br>
<input type="button" id="cancella1" value="cancella dati" onclick="cancella()"><br>
</TABLE></FIELDSET>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
codice:
function testo()
{
testo=testo1.value;
colore=colore1.value;
col_bo=col_bo1.value
xP=xP1.value;
yP=yP1.value;
ctx.beginPath();
ctx.font = "normal normal 80px Thaoma";
ctx.lineWidth=1;
ctx.fillStyle=colore; //riempimento
ctx.fillText(testo, xP, yP); //riempimento
ctx.strokeStyle=col_bo; //bordo
ctx.strokeText(testo, xP, yP); //bordo
ctx.closePath();
}
function cancella()
{
testo1.value="";
colore1.value="";
col_bo1.value="";
xP1.value="";
yP1.value="";
}
</script>
</body>
</html>