Help su immagine creata in realtime

**TRAX3D** · 05-02-2013, 22.33.03

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

**karl94** · 05-02-2013, 22.57.38

Conosci l'elemento HTML5 canvas?

**dreadnaut** · 05-02-2013, 23.22.19

Se non lo conosci Introduction to Canvas.

**TRAX3D** · 06-02-2013, 02.23.43

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>

**alemoppo** · 06-02-2013, 02.48.57

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

Codice:

getElementById('x1');

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

Infine, quando uno script javascript non ti funziona, è fondamentale dare uno sguardo alle console integrate nei browser, perché danno importantissime informazioni sull'errore.

Ciao!

**TRAX3D** · 09-02-2013, 18.47.35

Originalmente inviato da alemoppo

In ogni caso, con

Codice:

getElementById('x1');

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

a me pare che id='y1' ci siano!!!

Comunque ho risolto
Grazie

**dreadnaut** · 09-02-2013, 18.55.22

getElementById ti restituisce il nodo <input>, non il suo valore. Da quello devo recuperare il numero con l'attributo value.

Codice:

var vx1    = document.getElementById('x1').value;

(che probabilmente è come hai risolto tu, ma per i posteri mi sembra utile scriverlo)

**TRAX3D** · 09-02-2013, 21.31.02

In realtà visto che a qualcuno potrebbe servire ho risolto con

Codice HTML:

var vDG = parseFloat(x1.value);

e senza var vx1 = document.getElementById('x1').value;
visto che funziona.

N.B.:Se non facevo parseFloat non mi faceva la somma aritmetica ma sommava delle stringa mah....

**alemoppo** · 09-02-2013, 21.43.17

Originalmente inviato da TRAX3D

a me pare che id='y1' ci siano!!!

Ops, non avevo visto :P
---

Originalmente inviato da TRAX3D

In realtà visto che a qualcuno potrebbe servire ho risolto con

Codice HTML:

var vDG = parseFloat(x1.value);

e senza var vx1 = document.getElementById('x1').value;

però x1 lo prelevi con document.getElementById('x1'), quindi è la stessa cosa

Sarebbe:

Codice:

var x1 = document.getElementById('x1');
var vDG = parseFloat(x1.value);

Che è la stessa cosa di

Codice:

var vDG = parseFloat(document.getElementById('x1').value);

---

Originalmente inviato da TRAX3D

N.B.:Se non facevo parseFloat non mi faceva la somma aritmetica ma sommava delle stringa mah....

È giusto, perché quando prelevi il value, te lo prende in formato stringa. Puoi usare anche parseInt() per trasformarlo in intero.

Ciao!

Discussione: Help su immagine creata in realtime

LinkBack

Strumenti discussione

Display

Help su immagine creata in realtime

Regole di scrittura