Il codice qui riportato non funziona perché riporta l'errore: tempo in not a function
Ma se si abolisce la riga in grassetto:
function avvia() {
e la riga che chiude la funzione, anche in grassetto:
}
la function tempo() è riconosciuta e il programma funziona e si vede la pallina rimbalzare sulle pareti.
Perché questo strano comportamento?
Grazie

lanvoel

codice:
<!doctype html>
<html>
<body>
<canvas id="myCanvas" width"300" height="200" style="border:1px solid red; background:cyan";>
</canvas><br>
<input type="button" value="avvia1" onclick="avvia()">
<input type="button" value="ferma" onclick="ferma()">
<script>
var tempo1;
var tempo;
var x=1;
var y=1;
dx=1;
dy=1;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


function avvia() {
tempo1=window.setInterval("tempo()",10);
function tempo() {
ctx.clearRect(0,0,myCanvas.width, myCanvas.height);
if(dx==1) {x++;
if(x>=280) {dx=-1}}
if(dx==-1){x--;
if(x<=0) {dx=1}
}
if(dy==1) {y++;
if(y>=180) {dy=-1}}
if(dy==-1){y--;
if(y<=0) {dy=1}
}
ctx.beginPath()
ctx.strokeStyle="red";
ctx.lineWidth=4;
ctx.fillStyle="blue"
ctx.arc(10+x,10+y,10,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
} 
}


function ferma() {
clearInterval(tempo1);
}


</script>
</body>
</html>