Il meccanismo è banale.
Quel tutorial che avevo trovato è un tantinello cervellotico, ma mi è servito a capire il meccanismo, che poi ho verificato su un tutorial più facile da capire.
Ecco il codice:
<!DOCTYPE html>
<html>
<head>
<script>
var canvas;
var ctx;
var x;
var y;
var sfondo = new Image();
function inizia(){
canvas=document.getElementById("myCanvas");
ctx=canvas.getContext("2d");
ctx.fillStyle="#000080";
ctx.beginPath();
ctx.rect(0,0,600,600);
ctx.closePath();
ctx.fill();
sfondo=ctx.getImageData(0,0,600,600);
x=0;
y=600;
z=setInterval(disegna,100);
}
function disegna(){
ctx.putImageData(sfondo,0,0);
ctx.strokeStyle="white";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(x,y);
ctx.closePath();
ctx.stroke();
x=x+10;
}
window.addEventListener("load", inizia);
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600">
</canvas>
</body>
</html>
che traccia una linea che si muove.
Nessun commento:
Posta un commento