Here is code rubber ball, it follows mouse cursor when you move.
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas-Animación</title>
<script type="text/javascript">
var x=0; //coordenada x del objeto
var incx=10; //incremento x
var y=0; //coordenada y del objeto
var incy=5; //incremental de y
var mouseX=0;
var mouseY=0;
var delay=10;
var timer=10;
function init(){
var canvas = document.getElementById('tutorial');
//loop calls dibuja each 20 ms
setInterval(dibuja,20);
canvas.addEventListener('mousemove', ev_mousemove, false);
}
function ev_mousemove (ev) {
mouseX = ev.layerX;
mouseY = ev.layerY;
}
function dibuja(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
timer+=1;
ctx.fillStyle ="rgba(200,30,10,1)";
ctx.strokeStyle="#000";
delay=20-(mouseY/100);
accelX=mouseX-x;
accelY=mouseY-y;
x+=(accelX)/delay;
y+=(accelY)/delay;
x+=Math.sin(timer)*accelX/5;
y+=Math.sin(timer)*accelY/5;
//limpia el canvas
ctx.clearRect(0,0,400,400);
//dibuja linea
ctx.beginPath();
ctx.moveTo(200,400);
ctx.lineTo(x,y);
ctx.stroke();
//dibuja el circulo
ctx.beginPath();
ctx.arc(x,y,50,0,Math.PI*2,true);
ctx.fill();
// ctx.translate((200-mouseX)/100,0);
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="init();">
<canvas id="tutorial" width="400" height="400"></canvas>
</body>
</html>
DEMO:
.
Recent Comments