Salve,
mi servirebbe una dritta su come fare a modificare un immagine 400X300pixel a sfondo nero, che in base alle modifiche fatte in input box crei delle linee archi ecc. in real time.
grazie
Printable View
Salve,
mi servirebbe una dritta su come fare a modificare un immagine 400X300pixel a sfondo nero, che in base alle modifiche fatte in input box crei delle linee archi ecc. in real time.
grazie
Conosci l'elemento HTML5 canvas?
Se non lo conosci Introduction to Canvas.
ufff che casino! non è che sono espertissimo...
mi potete dare un'occhiata se metto ctx.moveTo(vx1,vy1); non funziona!!!!
Codice HTML:<html>
<head>
<script type="application/javascript">
function draw()
{
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var vx1 = document.getElementById('x1');
var vy1 = document.getElementById('y1');
var vx2 = document.getElementById('x2');
var vy2 = document.getElementById('y2');
// Stroked triangle
ctx.beginPath();
ctx.moveTo(100,100); //se metto ctx.moveTo(vx1,vy1); non funziona!!!!
ctx.lineTo(200,200);
ctx.closePath();
ctx.stroke();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<br>
<input size='3' type="Text" name="x1" Value="100" id='x1' onkeyup="draw()"><br>
<input size='3' type="Text" name="y1" Value="100" id='y1' onkeyup="draw()"><br>
<input size='3' type="Text" name="x2" Value="200" id='x2' onkeyup="draw()"><br>
<input size='3' type="Text" name="y2" Value="200" id='y2' onkeyup="draw()"><br>
</body>
</html>
vx1 e vy1 non sono "numeri", ma oggetti prelevati con la getElementById()! Devi prelevare la proprietà value, quindi dovrebbero essere vx1.value e vy1.value.
In ogni caso, con
e le altre, cosa prelevi? Nel codice che hai scritto non c'é nulla con un id che vale quei valori. Invece di "name" volevi scrivere "id"?Codice:getElementById('x1');
Infine, quando uno script javascript non ti funziona, è fondamentale dare uno sguardo alle console integrate nei browser, perché danno importantissime informazioni sull'errore.
Ciao!
:|Citazione:
Originalmente inviato da alemoppo
a me pare che id='y1' ci siano!!!Codice HTML:<input size='3' type="Text" name="x1" Value="100" id='x1' onkeyup="draw()"><br>
<input size='3' type="Text" name="y1" Value="100" id='y1' onkeyup="draw()"><br>
<input size='3' type="Text" name="x2" Value="200" id='x2' onkeyup="draw()"><br>
<input size='3' type="Text" name="y2" Value="200" id='y2' onkeyup="draw()"><br>
Comunque ho risolto
Grazie
getElementById ti restituisce il nodo <input>, non il suo valore. Da quello devo recuperare il numero con l'attributo value.
(che probabilmente è come hai risolto tu, ma per i posteri mi sembra utile scriverlo)Codice:var vx1 = document.getElementById('x1').value;
In realtà visto che a qualcuno potrebbe servire ho risolto con
e senza var vx1 = document.getElementById('x1').value;Codice HTML:var vDG = parseFloat(x1.value);
visto che funziona.
N.B.:Se non facevo parseFloat non mi faceva la somma aritmetica ma sommava delle stringa mah....
Ops, non avevo visto :PCitazione:
Originalmente inviato da TRAX3D
---
però x1 lo prelevi con document.getElementById('x1'), quindi è la stessa cosa :tongueCitazione:
Originalmente inviato da TRAX3D
Sarebbe:
Che è la stessa cosa diCodice:var x1 = document.getElementById('x1');
var vDG = parseFloat(x1.value);
---Codice:var vDG = parseFloat(document.getElementById('x1').value);
È giusto, perché quando prelevi il value, te lo prende in formato stringa. Puoi usare anche parseInt() per trasformarlo in intero.Citazione:
Originalmente inviato da TRAX3D
Ciao!