Cita: y si lo intentas con css3?
Es que dijo que lo quiere para un escenario
canvas. A menos que esté usando uno como fondo de alguna caja, pero sería muy raro, supongo que algo así lo hubiese advertido en el mensaje.
El método está en cualquier tutorial. Te dejo algo como muestra. No es lo más eficiente ni lo mejor que se ha escrito, pero para empezar creo que está bien.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>IMAGEN EN CANVAS QUE SE DESPLAZA.</title>
<script type="text/javascript">
var ye = 0;
var img = new Image();
img.src = 'http://img31.imageshack.us/img31/4550/ojos210.gif';
function draw() {
ye = (ye < -1000)? 0 : ye-2;
var ctx = document.getElementById('canvas').getContext('2d');
ctx.clearRect(0,0,800,300);
ctx.drawImage(img,0,ye);
setTimeout(draw , 100);
}
onload = draw;
</script>
</head>
<body>
<canvas id="canvas" width=800 height=300></canvas>
</body>
</html>
Usé una imagen real, no estoy seguro de si el modelo crea sus propios dibujos. Pero sería más o menos lo mismo.
Imagen: ◙